考虑这个简化的 webpack 示例
webpack.config.js
module.exports = (env, options) => {
return {
module : {
rules : [
{
test : /\.css$/,
use : [
{ loader : 'postcss-loader' },
],
},
],
},
plugins : [
]
};
};
postcss.config.js
module.exports = (api) => {
return {
plugins : [
['postcss-custom-properties'],
['postcss-color-mod-function'],
],
}
};
文件.css
:root {
--myvar: color-mod(#1BB749 w(+10%) s(+1%));
}
.test1 { color: color-mod(#1BB749 w(+10%) s(+1%)); }
.test2 { color: var(--myvar); }
输出是
.test1 { color: hsl(137.69230769230768, 56.4140127389%, 46.1764705882%); }
.test2 { color: color-mod(#1BB749 w(+10%) s(+1%)); }
.test2
为什么不处理color-mod() in ?我有正确的插件顺序,其中 postcss-custom-properties 首先处理变量,然后 postcss-color-mod-function 应该处理 color-mod() 但它没有被处理。
解决方案是仅在 webpack 插件部分而不是在 module.rules 部分中使用 postcss-color-mod-function,但是在监视或开发服务器热重载期间使用 postcss-color-mod-function 处理整个捆绑包会对性能产生负面影响。所以我希望它可以在 module.rules 部分按预期工作。谢谢。