Drinking with npm (Bourbon and Neat)
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.
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!