0

考虑这个简化的 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 部分按预期工作。谢谢。

4

0 回答 0