作者：最美的你 | 来源：互联网 | 2023-05-23 19:24
目前在我们的Sass文件中,我们有类似以下内容:
@import "../../node_modules/some-module/sass/app";
这很糟糕,因为我们实际上并不确定路径:它可能是../node_modules,它可能是../../../../../node_modules,因为npm如何安装东西.
在Sass中我们可以搜索到找到node_modules吗？甚至是通过npm包括Sass的正确方法？
1> ProllyGeek..：
如果你在2017年寻找一个方便的答案并使用Webpack,这是我发现的最简单的.
假设您的模块路径如下:
node_modules/some-module/sass/app
然后在您的主scss文件中,您可以使用:
@import "~some-module/sass/app";
Tilde运营商应将任何导入解析为模块.
在我看来,只有你使用Webpack才能自动运行.
@CTarczon这个应该在答案中提到,很多人,包括我自己,不要用Webpack来编译他们的Sass.
2> 小智..：
正如Oncle Tom所提到的,新版本的Sass有这个新importer选项,你在Sass文件中执行的每个"导入"都将首先通过这个方法.这意味着您可以修改此方法的实际URL.
我习惯于require.resolve找到实际的模块条目文件.
看看我的gulp任务,看看它是否对你有所帮助:
'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'));
});
现在假设你inuit-normalize使用node 安装了.你可以在你的Sass文件中简单地"要求"它:
@import "inuit-normalize";
我希望能帮助你和他人.因为添加相对路径总是痛苦的屁股:)
棒极了!`node_modules/inuit-normalize`里面的文件名是`@import"inuit-normalize"`load？
3> Kamil Jopek..：
您可以在渲染选项中添加另一个includePath.
简单的例子
基于Oncle Tom示例的片段.
var optiOns= {
file: './sample.scss',
includePaths: [
path.join(__dirname, 'bower_components'), // bower
path.join(__dirname, 'node_modules') // npm
]
};
sass.render(options, function(err, result){
console.log(result.css.toString());
});
4> Oncle Tom..：
您可以使用Sass importer函数执行此操作.参看 https://github.com/sass/node-sass#importer--v200.
以下示例说明node-sass@3.0.0和node@0.12.2:
安装凉亭依赖:
$ bower install sass-mq
$ npm install sass/node-sass#3.0.0-pre
Sass文件:
@import 'sass-mq/mq';
body {
@include mq($from: mobile) {
color: red;
}
@include mq($until: tablet) {
color: blue;
}
}
节点渲染器文件:
'use strict';
var sass = require('node-sass');
var path = require('path');
var fs = require('fs');
var optiOns= {
file: './sample.scss',
importer: function bowerModule(url, file, done){
var bowerCompOnent= url.split(path.sep)[0];
if (bowerComponent !== url) {
fs.access(path.join(__dirname, 'bower_components', bowerComponent), fs.R_OK, function(err){
if (err) {
return done({ file: url });
}
var newUrl = path.join(__dirname, 'bower_components', url);
done({ file: newUrl });
})
}
else {
done({ file: url });
}
}
};
sass.render(options, function(err, result){
if (err) {
console.error(err);
return;
}
console.log(result.css.toString());
});
这个很简单,不是递归的.该require.resolve函数可以帮助处理树 - 或者等到npm@3.0.0以从平面依赖树中受益.
5> mikemaccana..：
我专门为此制作了sass-npm模块.
npm install sass-npm
在你的SASS中:
// 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具有相同的'importer'选项)
var gulp = require('gulp'),
sass = require('gulp-sass'),
sassNpm = require('sass-npm')();
然后,在您.pipe(sass())的帐户中添加导入程序:
.pipe(sass({
paths: ['public/scss'],
importer: sassNpm.importer,
}))
京公网安备 11010802041100号