sass-module-importer

sass-module-importer

Simple importer for node-sass to import npm and bower modules.

Say good-bye to all the mess with relative paths on your Sass files.
You can now import your Sass/SCSS modules by referencing to the module name, like this:

@import "sass-easing";
@import "quantum-colors";
@import "inuit-defaults";
@import "inuit-functions";
@import "inuit-mixins";
@import "inuit-box-sizing";
@import "inuit-normalize";
@import "inuit-page";
// :)

Just for comparison, look at this mess:

@import "node_modules/sass-easing/_easings.scss";
@import "bower_components/quantum-colors/_quantum-colors.scss";
@import "bower_components/inuit-defaults/settings.defaults";
@import "bower_components/inuit-functions/tools.functions";
@import "bower_components/inuit-mixins/tools.mixins";
@import "bower_components/inuit-normalize/generic.normalize";
@import "bower_components/inuit-box-sizing/generic.box-sizing";
@import "bower_components/inuit-page/base.page";
// :(

How-to

install

npm install sass-module-importer --save-dev

use the importer with node-sass >= v3.0.0

var sass = require('node-sass');
var moduleImporter = require('sass-module-importer');

sass.render({
  file: './source/css/app.scss',
  importer: moduleImporter()
}, cb);

use the importer with gulp-sass

var gulp = require('gulp');
var sass = require('gulp-sass');
var moduleImporter = require('sass-module-importer');

gulp.task('style', function() {
  return gulp.src('./source/css/app.scss')
    .pipe(sass({ importer: moduleImporter() }))
    .pipe(gulp.dest('./public/css'));
});

Tests

Use npm test to run the tests.

Issues

If you discover a bug, please raise an issue on Github. https://github.com/lucasmotta/sass-module-importer/issues

Contributors

The source code and the test are written in ES6 (ECMAScript 2015).
Babel is being used to compile to ES5 before the package is published to npm.