如何使用 PostCss 编译 CSS 变量答案

【问题标题】：How to Compile CSS variables with PostCss如何使用 PostCss 编译 CSS 变量
【发布时间】：2020-04-07 02:40:53
【问题描述】：

我正在使用带有 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'),
    ],
};

我的构建命令：

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

【问题讨论】：

你需要下一个插件 postcss-css-variables

标签： css reactjs webpack postcss

【解决方案1】：

正如评论中提到的@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'),
    ],
};

【讨论】：