css - 如何使用PostCss编译CSS变量

我正在使用带有CRA和react-app-rewired的React，我想将CSS自定义属性（-*）编译为纯CSS：

来自：

.section {
    --gap-horizontal: 10px;
}

.section .item {
    margin: 0 var(--gap-horizontal);
}

像这样：

.section .item {
    margin: 0 10px;
}

这是我的
postcss.config.js

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-preset-env')({
            stage: 1,
        }),
        require('postcss-nested'),
        require('autoprefixer'),
    ],
};

我的构建cmd：

postcss src/**/*.css --dir build

最佳答案

正如@Grzegorz T在评论中提到的那样，我必须添加postcss-css-variables插件。

安装：

yarn add -D postcss-css-variables

将require('postcss-css-variables')添加到postcss.config.js：

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-css-variables'),
        require('postcss-preset-env')({
            stage: 1,
        }),
        require('postcss-nested'),
        require('autoprefixer'),
    ],
};

关于css - 如何使用PostCss编译CSS变量，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59326048/