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

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


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.


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"      }
  1. 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']);   })
  1. Now open the "Task Runner Explorer" and double click on the task: "watch-sass"Task Runner Explorer

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


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.