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.