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
@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
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.