To start working with SASS/SCSS in a new ASP.NET Core application, we need to create some files and tasks first. In this example, we are going to work with Gulp to build our SCSS files.

The gulpfile.js file

First, we need to create a new gulpfile.js file at our application route folder. In this file, we are going to define our gulp tasks. Here is a default implementation of this:

"use strict";

var gulp = require("gulp"),
  rimraf = require("rimraf"),
  concat = require("gulp-concat"),
  cssmin = require("gulp-cssmin"),
  sass = require("gulp-sass"),
  uglify = require("gulp-uglify");

var paths = {
  webroot: "./wwwroot/"
};

paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";

gulp.task("clean:js", function (cb) {
  rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
  rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
  return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
    .pipe(concat(paths.concatJsDest))
    .pipe(uglify())
    .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
  return gulp.src([paths.css, "!" + paths.minCss])
    .pipe(concat(paths.concatCssDest))
    .pipe(cssmin())
    .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

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

We can see in the last task, our sass task, that we are going to use a Styles folder with a main.scss file for our starter point. This is located at the root of our application. We need to create this folder and file.

The package.json file

Now, we can add Gulp and the required dependencies to our package.json file. If the file didn’t exist, create it at the root folder of your application.

{
  "devDependencies": {  
    "gulp": "3.9.1",
    "gulp-concat": "2.6.1",
    "gulp-cssmin": "0.1.7",
    "gulp-sass": "3.1.0",
    "gulp-uglify": "2.0.1",
    "rimraf": "2.6.1"
  }
}

The Task Runner Explorer

In Visual Studio, right click the gulpfile.js file and select Task Runner Explorer. We can now see the list of Gulp tasks. If you don’t, you might have to click the refresh button.

Form the task runner explorer window, right click the sass task and under Bindings, select Before Build. This is going to launch the sass task before every build for us.

Import our new css file in _layout

To make our new styles work, we need to add a new <link> tag to our Views/Shared/_Layout.cshtml file.

In our Development environement section in the head we need to add:

<link rel="stylesheet" href="~/css/main.css" />

In our Staging,Production environment, we can add:

<link rel="stylesheet" href="~/css/main.min.css" asp-append-version="true" />

And that is it, we can now start working with our starter file located at <app_root>/Styles/main.scss and build our styles using SASS/SCSS.

Have Fun and Happy Coding!

References

https://docs.microsoft.com/en-gb/aspnet/core/client-side/using-gulp
https://docs.microsoft.com/en-gb/aspnet/core/client-side/less-sass-fa