Compiling SASS in Visual Studio 2015

When Visual Studio 2015 is released, Web Essentials will no longer support compiling SASS files. The recommended method is now to use Grunt to do this for you. It was a bit of a search to find the correct setup to get this working so I thought I'd explain what I did to help others get this running.

This seems a bit of an ordeal to get going, you need quite a few installs, however once you have it all setup it's really simple to run.

First off you're going to need Ruby and the sass module for Ruby. Download and install ruby from RubyInstaller.org. Make sure you check the box to add Ruby to your path during the install. Once that is complete, open a command prompt and install sass using gem. 

> gem install sass

Next you'll need NodeJS, install this, again make sure it adds to your path during the install.

Once that is installed, you now have the prerequisites for this to run in Visual Studio. Now open your project in Visual Studio. Right click your project and select Add > Grunt and Bower to project.

This will add a package.json, bower,json and gruntfile.js to the project. The package.json allows you to install grunt packages by adding them as dependencies to the project, in the devDependencies section add:

"grunt-bower-task": "^0.4.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-sass": "^0.9.2"

My file now looks like this:

{
 "name": "package",
 "version": "1.0.0",
 "private": true,
 "devDependencies": {
   "grunt": "0.4.5",
   "grunt-bower-task": "^0.4.0",
   "grunt-contrib-watch": "^0.6.1",
   "grunt-contrib-sass": "^0.9.2"
 }
}

Saving this file installs the new packages, we now need to configure those packages, this is done in gruntfile.js, at the bottom of the file just above the closing brace add:

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

Then in grunt.initConfig section underneath the bower section add

sass: {
  dist: {
    options: {
      style:'compressed'
    },
    files: [
      {
        expand: true,
 cwd: 'scss',
 src: ["*.scss"],
 dest: "css",
 ext: ".min.css"
      }
    ]
  }
},
watch: {
  sass: {
    files: ["**/*.scss"],
    tasks: ["sass"],
    options: {
      livereload: true
    }
  }
}

I should explain what is going on here.

For the watch task I've set it up to monitor all .scss files (the files setting) and if any change run the sass task (the tasks setting).

The structure we have on our sites is a scss folder which contains the .scss files, and a css folder which contains the compiled css. So the sass task is configured to compile any *.scss source files (the src setting), in the scss directory (the cwd setting), compile them into the css destination folder (the dest setting). I've set it up to give the compiled files the .min.css extension (the ext setting) and set the option to compress/minify them.

That should be it, if you right click your gruntfile.js there is an option for Task Runner Explorer. Clicking this should launch the task runner explorer window and allow to launch different tasks. If you right click the watch task and run, this should then monitor for any scss changes and recompile all the files when once is changed.

More