Sass in MVC Core

Question

I am new to ASP.NET Core MVC. In MVC 5, I would just NuGet BundleTransformer.SassAndScss, and create a SCSS file, that would just work.

Now, seeing tutorials, everyone assume I have gulpfile.js, package.json, npm, etc. I have been rather sheltered, in a webform C# company, have just recently been converted to MVC5, and is told to move to Core.

When I create a Core project, I can create SCSS files like usual, but not compile them. Now, I would love to have a nuget package and forget about it, but no packages I've installed have worked so far. So I'm exploring NPM, but does not have node, as my understanding was that Node is a whole different language, that I install on the computer itself, I'm not sure if my coworkers will have it when I push to git, etc.

I've spent the day looking at different tutorials, but none seem to start from the same place as me.

Here is the most official tutorial for this (they assume I have a gulpfile.js, which I do not, and the tutorial does not work when I just create one). https://docs.asp.net/en/latest/client-side/less-sass-fa.html#id3

So, does anyone has a very basic tutorial or sample project, starting from a very .NET background?

Answer 1

So I fixed my mistake. Here are all the steps to get SCSS files running from a MVC Core template in Visual Studio.

1. Under the src folder, right click on the name of your project and add a file called "package.json".
2. Paste this in "package.json":

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
     "gulp": "3.9.1",
     "gulp-sass": "2.3.2",
     "rimraf": "2.5.4"
  }
}

3. Again, at the root of your project, add a file called "Gulpfile.js".
4. Paste this code in it:

var gulp = require("gulp"),
rimraf = require("rimraf"),
fs = require("fs"),
sass = require("gulp-sass");

gulp.task("sass", function () {
return gulp.src('wwwroot/css/site.scss')
  .pipe(sass())
  .pipe(gulp.dest('wwwroot/css'));
});

5. Now go in the wwwroot folder, css folder, and add a SCSS file called "site.scss" (name does not matter). However, if you name it site.scss, please make sure you delete the default site.css, to make sure your's works.
6. In your scss file, put some scss code. For example:

$base: #000000;
body {
   background-color: $base;
}

7. If you just run it, it will work, but I must confess I still went in View-> Other Windows -> Task Runner Explorer, I saw the task sass, right-click it, run, it works, then I ran the whole project. Keep in mind that there is already references to the site.css file in the _Layout and bundleconfig.json, so if you had chosen another name or path for the scss file, change it accordingly.... Hm, changing the scss and re-running it does not change the front-end. I need to go in the task runner explorer and rerun it everytime... There must be a way to run the gulpfile task on save...
8. Ok, I had to add a Watch task in the gulpfile.js and run it in the Task Runner Explorer.

gulp.task('watch', function () {
   gulp.watch('wwwroot/css/site.scss', ['sass']);
});