sass-module-importer

2019-07-14 admin

sass-module-importer是什么

什么是sass-module-importer,Import Sass files from NPM and Bower Modules

sass-module-importer使用教程帮助文档

Build Status

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

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

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-module-importer --save-dev

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

import sass from 'node-sass';
import moduleImporter from 'sass-module-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-module-importer';

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

import partials

If you need to import partials from your external module, just use the path for the partial you want to import. To import the following file:

node_modules/module-name/folder/to/_file.scss

Import like this anywhere:

@import "module-name/folder/to/_file.scss"

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/lucasmotta/sass-module-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.

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69729.html

文章标题:sass-module-importer

回到顶部