Sass Imports from NPM: Why We Built sassy-npm-importer

We just released sassy-npm-importer to make it easier to @import Sass modules from npm packages. We have been looking for a more elegant way to load Sass from packages like foundation-sites. We also wanted a nicer way to package up Sass styles with our React components into single packages. Before sassy-npm-importer, your @import statements had to include a relative path all the way up your directory structure and then down into your node module directory (read: lots of ../../../node_modules/foo/bar paths).

So Joel created sassy-npm-importer to clean those paths up. It is an npm module which exports a custom loader for node-sass. This custom loader allows you to import files from the node module directory like this: @import 'npm://foundation-sites/scss/foundation';. You don’t have to remember how many directories deep you are into your project just to import something from foundation or another npm package!

The loader is usable both from the node-sass command line tool (via the --importer argument) and via the library as an option. Since gulp-sass passes along its options to node-sass, you could also use this loader with gulp.

The module is intentionally simple and serves a single purpose. It does not include any opinions on how you should maintain dependency linkages between your JavaScript files and your Sass files. You could add other tools to your stack to manage that part (e.g. Webpack) and so long as they support node-sass loaders,they’ll work just fine with sassy-npm-importer.

To get started, check out the quick start guide here. And check out some of the other things we’ve built!

More Posts by Robert Prehn: