dribbblefacebookgithubgooglepluslinkedinrsstwitter

Drinking with npm (Bourbon and Neat)

Posted on by Devin Clark

Both Bourbon and Neat are available on npm. This, along with node-sass, has allowed me to remove Ruby from my development stack.

I'm sure at least a few of you are under the impression that npm is only for node modules. This is not true. jQuery has recently given up on their plugin registry in favor of npm. So, you can use npm for client-side code!

To start, let's delete Bourbon and Neat out of the lib directory (or wherever you are currently storing it). Next, we can npm i bourbon bourbon-neat --save.

Now you might think you can just @import 'bourbon'; but there is one change we have to make to our sass compilation process. I am using grunt-sass but these instructions should apply to any project using node-sass under the hood.

Node-sass has an option for includePaths. This option is an array of additional paths used to resolve an @import. We need to add two paths to this so we can import bourbon and neat.

At the time of writing, the grunt-sass config will look like this. It should be easy enough to do this with any of the other node-sass wrappers.

options: {
    includePaths: [
      'node_modules/bourbon/app/assets/stylesheets',
      'node_modules/bourbon-neat/app/assets/stylesheets'
    ]
}

This will allow you to @import 'bourbon'; and @import 'neat';, and also enjoy semver.

Have you also solved this problem in a different way? I would love to hear about it!