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
Now open up your
Gruntfile.js, and add this as an option inside your Sass task:
If you happen to be using
grunt-sass instead of
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:
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.