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

Question

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 1

This can also be achieved without gulp or grunt by simply clicking your way in Visual Studio.

Install Web Compiler

1. In Visual Studio, press Tools -> Extensions and updates.
2. Search for Web Compiler (created by Mads Kristensen) and install.
3. Restart of Visual Studio will be needed.

Compile files

1. Right-click the .scss-file in Solution Explorer to setup compilation.
2. Press Web Compiler -> Compile File (Shift+Alt+Q).

A file called compilerconfig.json is created in the root of the project where you can modify the behavior of the compiler. Right-clicking the compilerconfig.json file let’s you easily run all the configured compilers.

Any time a .scssfile is modified within Visual Studio, the compiler runs automatically to produces the compiled output file.

Compile on Build

1. Right-click the compilerconfig.json file
2. Press Web Compiler -> Enable compile on build
3. Clicking the menu item will prompt you with information that a NuGet package will be installed into the packages folder without adding any files to the project itself. The NuGet package contains an MSBuild task that will run the exact same compilers on the compilerconfig.json file in the root of the project.

Answer 2

If using Gulp + Visual Studio 2015

1. First install gulp-sass this is the package.json file

{
      "name": "ASP.NET",
      "version": "0.0.0",
      "devDependencies": {
        "gulp": "3.8.11",
        "gulp-concat": "2.5.2",
        "gulp-cssmin": "0.1.7",
        "gulp-uglify": "1.2.0",
        "rimraf": "2.2.8",
        "gulp-sass": "2.2.0"
      }

2. On the gulpfile.js

   var sass = require("gulp-sass");
   var paths = {
     webroot: "./wwwroot/"
   }
   paths.scss = paths.webroot + "css/**/*.scss";
   gulp.task('sass', function() {
     gulp.src(paths.scss)
       .pipe(sass())
       .pipe(gulp.dest(paths.webroot + "css"));
   });
   gulp.task('watch-sass', function() {
     gulp.watch(paths.scss, ['sass']);
   })

3. Now open the "Task Runner Explorer" and double click on the task: "watch-sass"

Now every time you save the scss the css will compile and change sass file.

Answer 3

Web Compiler Extension for VS2015

Gulp is required. npm install -g gulp

Hope this helps... a few less hoops.

Edit:

I encountered an issue with the web compiler converting strings to Unicode characters when it should not have been doing so. I switched to this implementation http://blog.oxfordcc.co.uk/compiling-sass-gulp-visual-studio/ in VS2015 and it's compiling the CSS correctly. Added just in case someone else encounters the same issue.

Answer 4

If you don't want to mess around with the intricacies of setting up the compilation manually, there are a number of amazingly simple extensions available that can handle this for you:

WebCompiler (FREE)

It's been mentioned already but Mads Kristensen (the author of web essentials) has created a standalone compilation tool called Web Compiler. All you have to do is install it, then right click on any of the SASS files you want to compile and select Web Compiler > Compile File. From that point on it is watched and anytime it is saved, the file will be compiled.

Download Web Compiler

---

CompileSASS (FREE)

Similar to Web Compiler this is a standalone extension that was created to work in both VS2013 and VS2015 because compilation was removed from the popular Web Essentials extension. It's lightweight and does the job very well with great error reporting. Read the author's blog about the extension here.

Download Compile SASS

---

Web Workbench (FREE/PAID)

Mindscape's Web Workbench was my favourite extension for many years when compiling SASS but I have since moved away in favour of the free alternatives. Still, the Pro version is a powerful tool with many ways to customise the outputted files but it is also quite expensive ($39) considering there are free tools out there.

Download Web WorkBench

Answer 5

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.