Nicholas Petersen Nicholas Petersen - 1 month ago 18
ASP.NET (C#) Question

How to compile .sass files on save in Visual Studio 2015

How can one get a full sass (i.e. scss) precompiler environment up and running in Visual Studio 2015? This is a sibling question to this one concerning less.

Answer

Most of the steps in answer to this question are identical to the steps that were given by 'Maverick' on this post that concerned how to do the same thing for less. However, someone did not allow me to alter that question to simply include sass (which maybe was best, I don't know). So the following answer relies on the steps specified by Maverick in that post above, with these differences:

(Pre-step for Empty Projects) If you started with an empty project, first add Grunt and Bower:

Right click solution -> Add -> 'Grunt and Bower to Project' (then wait for a minute for it to all install)

package.json:

"devDependencies": {
    "grunt": "^0.4.5",
    "grunt-bower-task": "^0.4.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-contrib-sass": "^0.9.2"
}

(FYI: grunt-contrib-sass link)

Then:

Dependencies -> right-click NPM -> Restore Packages.

gruntfile.js

1) Add or make sure these three lines are registered near the bottom (as NPM tasks):

grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-sass");

2) Again in gruntfile.js, add init configurations, something like the following.

{ Caveat: I am no expert on such configurations. I found the sass configuration on an excellent blog post some time ago that I can't locate at this time in order to give credit. The key was I wanted to find all files in the project within a certain folder (plus descendants). The following does that (notice "someSourceFolder/**/*.scss", and see important related note here). }

// ... after bower in grunt.initConfig ...
"default": {
    "files": [
        {
            "expand": true,
            "src": [ "someSourceFolder/**/*.scss" ],
            "dest": "wwwroot/coolbeans", // or "<%= src %>" for output to the same (source) folder
            "ext": ".css"
        }
    ]
},
"watch": {
    "sass": {
        "files": [ "someSourceFolder/**/*.scss" ],
        "tasks": [ "sass" ],
        "options": {
            "livereload": true
        }
    }
}

Now follow the instructions for Task Runner Explorer as given in the other answer. Make sure to close and reopen project. It seems you have to run (double click) 'watch' (under 'Tasks') every time the project is started to get the watch watching, but then it works on subsequent saves.

Comments