8

スタイルシート用のかなり複雑なローダー設定があります。

  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract("style",
      "css?sourceMap&localIdentName=[path][name]__[local]__[hash:base64:5]!sass?outputStyle=expanded&" +
      "includePaths[]=" + other stuff)
    )
  }

これはうまく機能しますが、一部の要件では、css-loader にオプションを追加する必要があるmodulesため、次のようになります。

require('./foo.scss!css?modules&sourceMap&localIdentName=[path][name]__[local]__[hash...');

しかし、私はこれをすべての場所で行うことはできません。

css-loader モジュール フラグを特定の要件で有効にしながら、残りの部分を同じに保つには、どうすればこれを構成できますか?

ローダーの「エイリアス」のようなものかもしれませrequire('./foo.scss!my-scss-with-modules-flag-alias')ん。

私が考えることができる唯一の解決策は、ローダー構成を特定のrequire呼び出しにインライン化する構文変換を行うローダーを作成することです...しかし、それは脆弱で複雑です。

4

2 に答える 2

16

resolveLoader.alias はここで機能します。すなわち。

resolveLoader: {
    alias: {
        'with-modules': 'loader definition goes here',
    }
}

この構成を使用すると、簡単に実行できます

require('with-modules!./foo.scss');

あなたのコードで。

于 2015-07-09T10:25:12.150 に答える
1

The resolveLoader.alias might work in the given case, since you are using a plugin as the loader. However if you need to use a chain of loaders, it will not work. (There's a feature request on it: https://github.com/webpack/webpack/issues/2772).

Instead you can add a parameter to the file in the require statement

var styles = require('./foo.scss?modules');

And create a new loader rule:

module: {
    loaders: [
        ...
        { test: /\.scss$/, loader: 'style!css!postcss!sass' },
        { test: /\.scss\?modules$/, loader: 'style!css?modules!postcss!sass' }
    ]
}
于 2016-07-22T09:46:11.960 に答える