如何使用 PostCss 编译 CSS 个变量

Question

我将 React 与 CRA 和 react-app-rewired 一起使用，我想将 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

Answer 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'),
    ],
};

如何使用 PostCss 编译 CSS 个变量

How to Compile CSS variables with PostCss

css

reactjs

webpack

postcss