現在、Sassファイルには次のようなものが含まれています。
@import "../../node_modules/some-module/sass/app";
実際にはパスがわからないので、これは悪いです:../node_modules
、 かもしれない ../../../../../node_modules
、npmがインストールする方法のため。
Sassにnode_modulesが見つかるまで検索できる方法はありますか?またはnpmを通じてSassを含める適切な方法ですか?
2017年に便利な答えを探していて、Webpackを使用している場合、これは私が見つけた最も簡単な方法でした。
あなたのモジュールパスが次のようなものであるとします:
node_modules/some-module/sass/app
次に、メインのscssファイルで使用できます。
@import "~some-module/sass/app";
チルダオペレーターは、インポートをモジュールとして解決する必要があります。
Oncle Tomが述べたように、 新しいバージョンのSassには、この新しいimporter
オプションがあります 。Sassファイルで行うすべての「インポート」は、最初にこのメソッドを経由します。つまり、このメソッドの実際のURLを変更できます。
require.resolve
実際のモジュールエントリファイルを検索します。
私の不満のタスクを見て、それがあなたに役立つかどうかを確認してください:
'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";
それがあなたや他の人の役に立つことを願っています。相対パスを追加することは常にお尻の痛みなので:)
別の 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());
});
それで十分です。 @import "my-cool-package/super-grid
を使用してパッケージのファイルを含めることができます
Webpackとscss-loaderの例
{
test: /\.scss$/,
loader: 'style!css!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=./node_modules'
},
最後の引数includePathsは配列でなければならないことに注意してください。 正しい形式 を使用することを覚えておいてください
これには、Sass importer
関数を使用できます。 Cf. https://github.com/sass/node-sass#importer--v2 。
次の例は、node-sass @ 3.0.0と[email protected]を示しています。
Bower依存関係をインストールします。
$ 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まで待機します。
私は 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と同じ「インポート」オプションがあります)
_var gulp = require('gulp'),
sass = require('gulp-sass'),
sassNpm = require('sass-npm')();
_
次に、.pipe(sass())
に、オプションとしてインポーターを追加します。
_.pipe(sass({
paths: ['public/scss'],
importer: sassNpm.importer,
}))
_