How to add SASS/SCSS support to a SailsJS application

When you create a brand new install of SailsJS, by default, SailsJS comes with only LESS support. Being a big fan of SCSS, I prefer to use SCSS instead of LESS. Unfortunately SailsJS as smart as it is does not automatically recognize if you are using SCSS. There is some "assembly required" if you will to get it to work in both development and production environments.

SASS package

Before we create our custom task, we need to install the necessary node package that will help us compile our SCSS. For this environment, I prefer the grunt-contrib-sass package. To install this package, enter the following into your terminal:

npm install grunt-contrib-sass --save

SASS task

If you aren't already familiar with the SailsJS file/folder structure, all of the Grunt tasks that Sails uses reside within the /tasks/config directory. To create a new task, simply create a new file within this folder and title it sass.js. Within this brand new file paste the following code:

module.exports = function(grunt) {

    grunt.config.set('sass', {
        dev: {
            files: [{
                expand: true,
                cwd: 'assets/styles/',
                src: ['importer.scss'],
                dest: '.tmp/public/styles/',
                ext: '.css'
            }]
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
};

This creates a Grunt task that can be started within any other registered Grunt tasks by simply calling sass:dev.

Calling the new task

Now that the task has been created, we now need to call it. There are currently 2 Grunt tasks that Sails uses to build its assets; each depends if you are opperating in a development or production environment.

The first task is the 'compileAssets' task that is located at /tasks/register/compileAssets.js. This task is called when the Sails server is started/restarted. The second task is 'syncAssets' task that is located at /tasks/register/syncAssets.js. This is called when you are using the watch task to recompile the assets. We need to add the following line of code to each of these registered tasks' array:

sass:dev

So for instance, your syncAssets.js file should look like this (assuming you haven't done any additional configuration):

module.exports = function (grunt) {
	grunt.registerTask('syncAssets', [
		'jst:dev',
		'less:dev',
		'sass:dev',
		'sync:dev',
		'coffee:dev'
	]);
};

Modifying the importer

As stated earlier, Sails comes with file named importer.less that can be found at /assets/styles/importer.less. Since we are no longer going to be using LESS, we need to rename this file to be importer.scss. Feel free to keep/delete all of the commented code in this file; your choice. Once done, restart your Sails server and watch Grunt take care of the rest.

Some house cleaning

When you use the grunt-contrib-sass package, it generates some cached directories/files where it stores some assets so it doesn't have to keep creating them to help with server performance. Since these files are new to the environment, your Git structure will want to add them as new files. We DO NOT want to add these to our repository since these files are intended to be unique and are time stamped. So we need to add the following to our .gitignore

.sass-cache

Finish it up

Assuming that you did everything correctly, you Sails server should now be parsing SCSS like a natural.

NOTE: If you prefer SASS to SCSS (yes there is a difference), simply change the importer filename to importer.sass and modify the sass Grunt task to import importer.sass instead of importer.scss on line 8.