sass-npm-importer

sass-npm-import

Unopinionated npm sass package support

Write your sass as if it has only single level dependencies. Things should just work (even if that's not true). The packages you're importing don't have to use any special syntax or directory structure. Your editor won't throw any resolution errors for your @import statements.

Usage

Your sass.

// file at ./src/dir/file.scss 
@import "../../node_modules/dependency-package/src/file.scss";
 
// ... 

package.json

{
    "dependencies": {
        "dependency-package": "^1.2.3"
    }
}

node-sass

var sass = require('node-sass'),
    sassNpmImport = require('sass-npm-import')(require);
 
sass.render({
    file: scss_filename,
    importer: sassNpmImport
}, function(err, result) { /*...*/ });

Webpack

module.exports = {
  // ...
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }
    ]
  },
  sassLoader: {
    importer: require('sass-npm-import')(require)
  }
};

Gulp

var gulp = require('gulp');
 
gulp.task('styles', function() {
    return gulp.src('src/**/*.scss')
        .pipe(require('gulp-sass')({
            importer: sassNpmImport = require('sass-npm-import')(require)
        }).on('error', function(e) {
            this.emit('end');
            gulpSass.logError.call(this, e);
        }))
        .pipe(gulp.dest('dst'));
});

The Problem

"Single level" sass npm dependencies work since the dependent package has a guaranteed position within node_modules.

example-package/
├── node_modules
│   └── dependency
│       └── src
│           └── _dep.scss
└── src
    └── _ep.scss

// _ep.scss 
@import "../node_modules/dependency/src/dep";

But, when another package depends on example-package, the import in _ep.scss breaks.

another-package/
├── node_modules
│   ├── example-package 
│   │   └── src
│   │       └── _ep.scss
│   └── dependency
│       └── src
│           └── _dep.scss
└── src
    └── _ap.scss

Things get even more confusing when the dependency tree has different versions of the same package.

another-package/
├── node_modules
│   ├── example-package 
│   │   ├── src
│   │   │   └── _ep.scss
│   │   └── node_modules
│   │       └── dependency
│   │           └── src
│   │               └── _dep.scss
│   └── dependency
│       └── src
│           └── _dep.scss
└── src
    └── _ap.scss