Have ideas to improve npm?Join in the discussion! »

    sass-modules-importer

    1.2.1 • Public • Published

    NPM

    sass-modules-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";
    // :( 

    Assuming that the external library you are installing fits under one of those categories:

    1. Set a SCSS/Sass/CSS file on the "main" field of their package.json/bower.json
    2. Set a SCSS/Sass/CSS file on the "style" field of their package.json/bower.json
    3. Have a index.css file on the root of their module

    Even if it doesn't, npm will resolve the paths if you have installed it via npm, so you can do things like this:

    @import "material-colors/dist/colors.scss";
    // :) 

    This tool it will also inline CSS files for you, since Sass cannot import plain CSS files yet. So if the dependency you are using exports a CSS file, it will work too.

    How-to

    install

    npm install sass-modules-importer --save-dev

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

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

    use the importer with gulp-sass

    import gulp from 'gulp';
    import sass from 'gulp-sass';
    import moduleImporter from 'sass-modules-importer';
     
    gulp.task('style', () => {
      return gulp.src('./source/css/app.scss')
        .pipe(sass({ importer: moduleImporter() }))
        .pipe(gulp.dest('./public/css'));
    });

    Options

    You can pass any option supported by node-resolve directly, like this:

    moduleImporter({ basedir: path.join(__dirname, 'another-folder') });

    Tests

    Use npm test to run the tests.

    Issues

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

    Contributors

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

    Install

    npm i sass-modules-importer

    DownloadsWeekly Downloads

    6

    Version

    1.2.1

    License

    MIT

    Last publish

    Collaborators

    • avatar