Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Configuring sass with your nodejs applications

If you have spent any sig­nif­i­cant amount of time writ­ing CSS, you would have real­ized by now that writ­ing and re-writing CSS can be a com­plete pro­duc­tiv­ity drain no mat­ter what size of projects you are work­ing on. SASS makes it a lot more eas­ier to write CSS by using a syn­tax very sim­i­lar to JSON that makes it not only more read­able but also lets you do cool things like spec­ify vari­ables, break down your css into mul­ti­ple files and import one from the other, etc etc.

There­fore before you start work­ing on your next nodejs project, this is one thing that you should def­i­nitey have in your project’s setup.

And thats exactly what we will set out to achieve in this arti­cle. All the source code for this tuto­r­ial is com­bined with the node starter kit and can be found on github in this par­tic­u­lar 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 cor­re­spond­ing css files based upon the source and des­ti­na­tion direc­to­ries that you specify.

Lets jump in.


Pack­age Instal­la­tions

You only need one pack­age for set­ting up SASS.

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

The next thing that you prob­a­bly want to do is add .sass-cache to your .gitignore file. These are tem­po­rary files cre­ated by the grunt sass com­mand that you prob­a­bly wont need to check in if you are using .git.

Grunt Con­fig­u­ra­tion
As men­tioned ear­lier the aim of this setup is to cre­ate a npm script as shown below that com­piles all the scss files present in public/scss direc­tory of your project into the public/stylesheets directory.

npm run build-css

This time, I will take a reverse approach to explain­ing how we are going to pro­ceed. Instead of start­ing from the task con­fig­u­ra­tion and end­ing with the package.json con­fig­u­raiton, we will first start from the pack­age json and and pro­ceed to the other con­fig­u­ra­tions that will make this whole thing work.

package.json
Cre­ate a script in your package.json as follows

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

As you see, we just cre­ated an npm script as an alias for the grunt sass com­mand. You might have another script called ‘build’ that builds every­thing as well as does a web­pack build on it. For exam­ple, I have the fol­low­ing 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 Grunt­file pretty com­pact by keep­ing the task con­fig­u­ra­tions in their own mod­ule under a directly that I call ‘grunt’.

This is what my grunt­file 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 con­fig­u­ra­tion
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 cou­ple of things going on here. I cre­ated an arbitary tar­get and called it ‘dist’ and gave it an prop­erty called ‘files’. That is how you spec­ify a com­mand to run on a bunch of files in a direc­tory in grunt. You can learn more about it from here.

Two things are pretty obvi­ous — the src is an array of source file match­ing pat­terns, the dest is the path to the desin­ta­tion direc­tory where the com­piled files will be placed. What is not obvi­ous is the fact that the cwd applies only to the src prop­erty. i.e. all the pat­terns that you spec­ify in the src array are rel­a­tive to the direc­tory spec­i­fied as the value of cwd .

Well, thats mainly it. Now if you cre­ate an scss file in your public/scss direc­tory and run the command

npm run build-css

the grunt scss task will run and cre­ate a public/stylesheets directory(we spec­i­fied this as the value of the dest prop­erty in our con­fig­u­ra­tion) and put your com­piled css files there.

Per­haps at this point, you might also want to add stylesheets to your .gitignore configuration.