Configuring sass with your nodejs applications

If you have spent any significant amount of time writing CSS, you would have realized by now that writing and re-writing CSS can be a complete productivity drain no matter what size of projects you are working on. SASS makes it a lot more easier to write CSS by using a syntax very similar to JSON that makes it not only more readable but also lets you do cool things like specify variables, break down your css into multiple files and import one from the other, etc etc. Therefore before you start working on your next nodejs project, this is one thing that you should definitey have in your project's setup. And thats exactly what we will set out to achieve in this article. All the source code for this tutorial is combined with the node starter kit and can be found on github in this particular commit This is what you would be able to do by the time we are done with this article. Run an npm script that builds all of your scss files into their corresponding css files based upon the source and destination directories that you specify. Lets jump in.

Package Installations

You only need one package for setting up SASS.

npm install grunt-contrib-sass --save-dev

The next thing that you probably want to do is add .sass-cache to your .gitignore file. These are temporary files created by the grunt sass command that you probably wont need to check in if you are using .git. Grunt Configuration As mentioned earlier the aim of this setup is to create a npm script as shown below that compiles all the scss files present in public/scss directory of your project into the public/stylesheets directory.

npm run build-css

This time, I will take a reverse approach to explaining how we are going to proceed. Instead of starting from the task configuration and ending with the package.json configuraiton, we will first start from the package json and and proceed to the other configurations that will make this whole thing work. package.json Create a script in your package.json as follows

scripts:{
    // other scripts
    // ...
    "build-css": "grunt sass"
}

As you see, we just created an npm script as an alias for the grunt sass command. You might have another script called 'build' that builds everything as well as does a webpack build on it. For example, I have the following scripts setup in my package.json.

"scripts": {
  "build": "grunt react && grunt webpack && grunt sass",
  "build-js": "grunt react && grunt webpack",
  "build-css": "grunt sass",
  "dev": "grunt watch & nodemon app"
},

Gruntfile.js Now lets add the sass grunt task to our package.json. If you have read my older posts, you would have noticed that I like to keep my Gruntfile pretty compact by keeping the task configurations in their own module under a directly that I call 'grunt'. This is what my gruntfile would look like with only the sass task configured.

module.exports = function(grunt) {

  grunt.initConfig({});

  grunt.config( 'sass', require('./grunt/sass.js') );

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

};

As you can see, its pretty lean. SASS task configuration Now lets take a look at the grunt/sass.js file that has the meat of our configuration.

module.exports = {
  dist: {
    files: [{
      expand: true,
      cwd: 'public/scss/',
      src: ['*.scss'],
      dest: 'public/stylesheets/',
      ext: '.css'
    }]
  }
};

There are a couple of things going on here. I created an arbitary target and called it 'dist' and gave it an property called 'files'. That is how you specify a command to run on a bunch of files in a directory in grunt. You can learn more about it from here. Two things are pretty obvious - the src is an array of source file matching patterns, the dest is the path to the desintation directory where the compiled files will be placed. What is not obvious is the fact that the cwd applies only to the src property. i.e. all the patterns that you specify in the src array are relative to the directory specified as the value of cwd . Well, thats mainly it. Now if you create an scss file in your public/scss directory and run the command

npm run build-css

the grunt scss task will run and create a public/stylesheets directory(we specified this as the value of the dest property in our configuration) and put your compiled css files there. Perhaps at this point, you might also want to add stylesheets to your .gitignore configuration.

sass 1