node.js - How do I make the Sass Importer combine files into one stylesheet? -
this question has answer here:
- import regular css file in scss file? 14 answers
i found out feature in node-sass named importer, allows handle encounter @import
in sass files.
i want take advantage of feature import .css files npm package easily, browserify.
here's sass file. (index.scss)
@import "normalize.css";
when run file through sass , importer, should output (supposed index.css):
/*! normalize.css v3.0.3 | mit license | github.com/necolas/normalize.css */ /** * 1. set default font family sans-serif. * 2. prevent ios , ie text size adjust after device orientation change, * without disabling user zoom. */ html { ...
instead, outputs (actual index.css):
@import url(/users/me/workspace/project/node_modules/normalize.css/normalize.css);
what gives? why importer changes file path instead of taking file , combining original file?
here's importer , gulp task runs sass (gulpfile.babel.js):
import gulp 'gulp'; import sass 'gulp-sass'; import rename 'gulp-rename'; import path 'path'; import fs 'fs'; let aliases = {}; function importnpmmodule(url, file, done) { // check if path found , cached if (aliases[url]) { return done({ file: aliases[url] }); } // modules installed through npm try { const basepath = path.resolve('node_modules', url); const pkginfo = path.join(basepath, 'package.json'); const info = json.parse(fs.readfilesync(pkginfo)); const newpath = path.join(basepath, info.style); aliases[url] = newpath; // cache request return done({ file: newpath }); } catch(e) { // if module not found, return original url aliases[url] = url; return done({ file:url }); } } gulp.task('sassify', () => { return gulp.src('./index.scss') .pipe(sass({ importer: inportnpmmodule })) .pipe(rename('index.css')) .pipe(gulp.dest('public')); });
edit: tried using npm package named sass-module-importer, has exact same problem have.
it's not importer problem. have error because there .css
in sass import. omit it.
if have problems after may should update last version of node-sass
or use hacks rename .css
.scss
before compiling.
Comments
Post a Comment