How to use Sass in ASP.NET Core 2.0 MVC

Prerequisites

• Node.js is installed.
• Visual Studio on a Windows PC

Add SASS File

Start by adding a Sass file to your project. Create a folder (Styles) in the root of the project

Add a Sass file to the folder.

run npm to create package.json

npm init

Install Grunt.

npm install grunt --save-dev

Now add Grunt's command line interface (CLI) to the project. The CLI runs the installed version of Grunt.

npm install grunt-cli --save-dev

Use grunt-sass to compile Sass.

npm install grunt-sass --save-dev

THE GRUNTFILE

With the packages installed add a js file to the root of the project called gruntfile.js. Here we will add a task to compile Sass.

module.exports = function (grunt) {
    'use strict';

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // Sass
        sass: {
            options: {
                sourceMap: true, // Create source map
                outputStyle: 'compressed' // Minify output
            },
            dist: {
                files: [
                    {
                        expand: true, // Recursive
                        cwd: "Styles", // The startup directory
                        src: ["**/*.scss"], // Source files
                        dest: "wwwroot/css", // Destination
                        ext: ".css" // File extension
                    }
                ]
            }
        }
    });

    // Load the plugin
    grunt.loadNpmTasks('grunt-sass');

    // Default task(s).
    grunt.registerTask('default', ['sass']);
};

The main points to note are;

• The startup directory is Styles
• we've set src to be recursive so we can add a folder structure and it will still work
• The destination for the css is wwwroot/css

Running The Task

Everything is now ready to run. Open Task Runner Explorer in Visual Studio from the tool bar View -> Other Windows -> Task Runner Explorer or right click on gruntfile.js in the Solution Explorer and select Task Runner Explorer.

Task Binding Options

Having to manually run the task each time could become tiring very quickly. Luckily there are some build options available. In Task Runner Explorer right click the task and select Bindings for four compilation options.

Selecting After Build for example will run the grunt task after every build. Selecting a binding adds a reference at the top of gruntfile.js like this.

/// <binding AfterBuild='default' />

https://www.iambacon.co.uk/blog/how-to-use-sass-in-asp-net-core-2-0-mvc

---

Also this might be useful

npm install --save-dev node-sass 

In you gruntfile, you than need to add node-sass as requirement and add the define constant as implementation option:

const sass = require('node-sass');

require('load-grunt-tasks')(grunt);

grunt.initConfig({
    sass: {
        options: {
            implementation: sass,
            sourceMap: true
        },
        dist: {
            files: {
                'main.css': 'main.scss'
            }
        }
    }
});