1.0.4 • Published 8 years ago
sass-npm-importer v1.0.4
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