我正在尝试在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')
这很冗长，但是
所以我的问题是：
是否可以根据不同的查询参数有条件地应用不同的加载程序？
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');
}
解决方案是使用间距加载程序有条件地生成模块：
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}")`;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句