'use strict';
var path = require('path'),
gulp = require('gulp'),
sass = require('gulp-sass');
var aliases = {};
/**
* Will look for .scss|sass files inside the node_modules folder
*/
function npmModule(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 {
var newPath = path.relative('./css', require.resolve(url));
aliases[url] = newPath; // cache this request
return done({ file:newPath });
} catch(e) {
// if your module could not be found, just return the original url
aliases[url] = url;
return done({ file:url });
}
}
gulp.task("style", function() {
return gulp.src('./css/app.scss')
.pipe(sass({ importer:npmModule }))
.pipe(gulp.dest('./css'));
});
// Since node_modules/npm-module-name/style.scss exists, this will be imported.
@import "npm-module-name";
// Since just-a-sass-file isn't an installed npm module, it will be imported as a regular SCSS file.
@import "just-a-sass-file";
我通常使用gulp-sass(它与常规SASS具有相同的“导入器”选项)
var gulp = require('gulp'),
sass = require('gulp-sass'),
sassNpm = require('sass-npm')();
7条答案
按热度按时间piah890a1#
如果你正在寻找一个方便的答案在2017年,并正在使用Webpack,这是最简单的我发现。
假设您的模块路径如下所示:
然后,在主scss文件中,可以用途:
波浪号操作员应将任何导入解析为模块。
gr8qqesn2#
正如Oncle Tom提到的,新版Sass有这个新的
importer
选项,在这里,你对Sass文件所做的每一个“导入”都将首先通过这个方法,这意味着你可以修改这个方法的实际url。我已经使用
require.resolve
来定位实际的模块入口文件。看看我的 Gulp 任务,看看它是否对你有帮助:
现在假设您使用node安装了
inuit-normalize
,您可以简单地在Sass文件中“要求”它:我希望这对你和其他人有帮助。因为添加相对路径总是一件麻烦事:)
a0zr77ik3#
可以将另一个includePaths添加到渲染选项。
简单示例
片段基于Oncle Tom的示例。
应该可以了。您可以使用
@import "my-cool-package/super-grid
包含包中的文件Webpack和scss加载程序示例
注意最后一个参数,includePaths必须是数组。记住使用正确的格式
xdyibdwo4#
你可以使用一个Sass
importer
函数来实现https://github.com/sass/node-sass#importer--v200。以下示例说明了node-sass@3.0.0与node@0.12.2的关系:
安装bower依赖项:
Sass文件:
节点渲染器文件:
型
这个函数很简单,而且不是递归的,
require.resolve
函数可以帮助处理树--或者等到npm@3.0.0才能从平面依赖树中受益。mspsb9vt5#
我专门为此制作了sass-npm模块。
在SASS中:
我通常使用gulp-sass(它与常规SASS具有相同的“导入器”选项)
型
然后,在
.pipe(sass())
中,将导入器作为一个选项添加:r6hnlfcb6#
对于
dart-sass
和2022的命令行用户,只需使用--load-path
选项:**重要提示:**整个node_modules文件夹包含太多内容,只需将其设置为在监视模式下启动非常慢。您只需设置包路径,例如:
kkbh8khc7#
从Sass的官方文档来看,在导入中添加
~
应该可以完成这项工作。然而,由于某种原因,它对我不起作用,sass编译器仍然抱怨找不到模块。
因此,我尝试了另一种方法,对我来说没有任何问题。下面是解决方案:
package.json
的scripts
中:然后运行:
型
总结一下,添加
--load-path=node_modules
标志永久解决了这个问题。有关详细信息,请查看: