2

webpack レベルでのcss-modulesグローバル vs ローカル css の問題を解決しようとしています。

私が現在持っている最善の解決策は、ファイルにラベルを付けて、それらに対してさまざまなローダーを実行することです。これは、実際のプロジェクトで使用するのは面倒です。

{
      test: /\.module.less$/,
      loader: 'style-loader!css-loader?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!less-loader'
}
{
      test: /^((?!\.module).)*less$/,
      loader: 'style!css!less'
}

ファイル styles.css があるとしましょう

アプリコードのどこかにこれを書きたい:

var localCss = require('magicCSSLoader?local!./styles.css')
require('magicCSSLoader?global!./styles.css')

これは冗長ですが、

  1. 明示的で、後で構成できます (localByDefault/globalByDefault)
  2. gitの観点から常にファイルの名前を変更するよりも優れています
  3. 同じファイルを別の方法で処理できます

だから私の質問は：

異なるクエリ パラメータに応じて、条件付きで異なるローダーを適用することは可能ですか?

loader: function(content, query) {
         if(query.local) {
           return webpackMagic(content, 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
         }
           return webpackMagic(content, 'style!css');
        }
4

1 に答える 1