Journal Contact

How To Use Bourbon with GruntJS


I recently started using Grunt to handle my project builds. I use it to compile, concatenate, and minify CoffeeScript files, and also to process my Sass files. For a while I was stuck on how to use a Sass-based mixin & utility library like Bourbon, with Grunt. After lots of research, I finally figured it out, so I thought I'd pass the knowledge to you, my dearly beloved reader. Please note this will not be a full tutorial on using Grunt. You should have some basic knowledge of that already. If not, read this excellent article by Chris Coyier, to get started.

Instead installing Bourbon the traditional way by installing it right into our project, we're going to list it as a Grunt dependancy, and require it as a load path. In your package.json add the following and then npm install:

"node-bourbon": "~1.0.0"

Now open up your Gruntfile.js, and add this as an option inside your Sass task:

loadPath: require('node-bourbon').includePaths

If you happen to be using grunt-sass instead of grunt-contrib-sass, use:

includePaths: require('node-bourbon').includePaths

Just one more thing left - you must import Bourbon at the very top of all your Sass files where you wish to utilize it. It's as simple as:

@import 'bourbon';

With that, you can now use all the Bourbon mixins and utilities you want, and it will play nicely with Grunt! Questions or comments? Reply below, or ping me on Twitter, @syropian.

comments powered by Disqus