Question

我正在尝试在webpack级别解决css-modules global vs local css issue。

我现在拥有的最佳解决方案是标记文件并在其上运行不同的加载器，这在实际项目中使用非常繁琐。

{
      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')

这很详细，但是

显式，稍后可以配置（localByDefault / globalByDefault）
比从git角度一直重命名文件
同一文件可以不同方式处理

所以我的问题是：

是否可以有条件地应用不同的加载器，具体取决于不同的查询参数？

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');
        }

Answer 1

解决方案是使用pitch加载程序有条件地生成模块：

var loaderUtils = require('loader-utils')

module.exports.pitch = function(remainingRequest) {
  var query = loaderUtils.parseQuery(this)
  if (query.local) {
    return `modules.exports = require("!!style!css?modules!${remainingRequest}")`;
  } else {
    return `modules.exports = require("!!style!css!${remainingRequest}")`;
  }
}

根据不同的查询参数，是否可以有条件地应用不同的加载器？

1 个答案: