web-dev-qa-db-ja.com

npmによるSassのインポート

現在、Sassファイルには次のようなものが含まれています。

@import "../../node_modules/some-module/sass/app";

実際にはパスがわからないので、これは悪いです：../node_modules、 かもしれない ../../../../../node_modules、npmがインストールする方法のため。

Sassにnode_modulesが見つかるまで検索できる方法はありますか？またはnpmを通じてSassを含める適切な方法ですか？

node.jssassnpmnode-modules
39
callumacrae

2017年に便利な答えを探していて、Webpackを使用している場合、これは私が見つけた最も簡単な方法でした。

あなたのモジュールパスが次のようなものであるとします：

node_modules/some-module/sass/app

次に、メインのscssファイルで使用できます。

@import "~some-module/sass/app";

チルダオペレーターは、インポートをモジュールとして解決する必要があります。

48
ProllyGeek

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";

それがあなたや他の人の役に立つことを願っています。相対パスを追加することは常にお尻の痛みなので:)

17
Lucas Motta

別の 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は配列でなければならないことに注意してください。 正しい形式 を使用することを覚えておいてください

16
Kamil Jopek

これには、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まで待機します。

7
Oncle Tom

私は 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,
}))
_
5
mikemaccana