Недавно я узнал об этой функции в узле-sass с именем importer, что позволяет обрабатывать любую встречу с @import в ваших sass-файлах.Как заставить Sass Importer объединить файлы в одну таблицу стилей?
Я хочу воспользоваться этой возможностью для импорта .css-файлов из пакета npm легко, аналогично Browserify.
Вот мой файл sass. (Index.scss)
@import "normalize.css";
Когда я запускаю этот файл через Sass и мой импортер, он должен вывести это (предполагается index.css):
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
*/
html {
...
Вместо этого он выводит это (фактический индекс. css):
@import url(/Users/me/workspace/project/node_modules/normalize.css/normalize.css);
Что дает? Почему мой импортёр меняет путь к файлу вместо taking the file and combining it with the original file?
Вот мой импортер и задача глотка, который работает Сассы (gulpfile.babel.js):
import gulp from 'gulp';
import sass from 'gulp-sass';
import rename from 'gulp-rename';
import path from 'path';
import fs from 'fs';
let aliases = {};
function importNpmModule(url, file, done) {
// check if the path was already found and cached
if (aliases[url]) {
return done({ file: aliases[url] });
}
// look for 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 this request
return done({ file: newPath });
} catch(e) {
// If module could not be found, return the 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: Я также попытался с помощью пакета НОГО с именем дерзость-модуль-импортером, но он имеет точно такое же проблема, которая у меня есть.