通过npm导入Sass
目前在我们的Sass文件中，我们有如下内容：
@import "../../node_modules/some-module/sass/app"; 这是不好的，因为我们实际上并不确定path：它可能是../node_modules ，它可能是../../../../../node_modules ，因为npm安装的东西。
在Sass中有没有一种方法可以search，直到findnode_modules？ 甚至通过npm包括萨斯的正确方法？
您可以使用Sass importerfunction来执行此操作。 参看 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()); });
这个很简单，不是recursion的。 require.resolve函数可以帮助处理树 – 或者等到npm@3.0.0从平面依赖树中受益。
如果你正在寻找一个方便的答案在2017年，并使用Webpack，这是我发现最简单的。
假设你的模块path如下所示：
node_modules/some-module/sass/app
然后在你的主scss文件中，你可以使用：
@import "~some-module/sass/app";
Tilde操作员应将任何导入作为模块解决。
你可以添加另一个includePaths到你的渲染选项。
简单的例子
以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()); });
正如Oncle Tom所提到的， Sass的新版本有这个新的importer选项 ，其中你在Sass文件中执行的每个“导入”都将首先通过这个方法。 这意味着你可以修改这个方法的实际URL。
我已经使用require.resolve来find实际的模块入口文件。
看看我的g task任务，看看它是否对你有帮助：
'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 。 你可以简单地在你的Sass文件中“要求”它：
@import "inuit-normalize";
我希望能帮助你和其他人。 因为添加相对path总是痛苦的屁股:)
我为此特意制作了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具有相同的“import商”选项）
var gulp = require('gulp'), sass = require('gulp-sass'), sassNpm = require('sass-npm')();
然后，在您的.pipe(sass()) ，添加导入器作为选项：
.pipe(sass({ paths: ['public/scss'], importer: sassNpm.importer, }))