Webpack - Postcss 嵌套未按建议使用

Question

我有一个使用嵌套规则的简单 css。

.root {
  background: var(--color-accent);
  padding: 0.8rem 1.5rem;
  color: var(--color-white);
  text-decoration: none;
  &:hover {
    background: var(--color-purple);
  }
}

我在 Webpack 中使用postcss-loader作为加载器。

  {
    test: /\.css$/i,
    use: ["style-loader", "css-loader", "postcss-loader"],
  },

这是我的postcss.config.js文件。 和https中使用的代码一样://github.com/postcss/postcss-nested#usage

module.exports = {
  plugins: ["autoprefixer", "postcss-nested"],
};

加载了 css 文件，但嵌套规则仍保持原样。 浏览器无法识别它。

怎样做才能达到以下目标？

.root {
  background: var(--color-accent);
  padding: 0.8rem 1.5rem;
  color: var(--color-white);
  text-decoration: none;
}


.root:hover {
  background: var(--color-purple);
}

CSS 变量在生成的 css（颜色作品）中定义。 postcss.config.js文件也已加载。

Chrome 中嵌套的 css 的屏幕截图。

更新

我在Codesandbox上建立了一个类似的项目。

https://codesandbox.io/s/zealous-tree-chz7y3

CSS 后嵌套都不起作用。

module.exports = () => ({
    plugins: [
        require("postcss-preset-env")({
            stage: 3,
            features: {
                "color-mod-function": { unresolved: "warn" },
                "nesting-rules": true,

                "custom-properties": {
                    preserve: false,
                },
            },
        }),
    ],
});

Answer 1

您正在使用create-react-app 。 恐怕它还不支持postcss.config.js ，正如在这个线程中看到的那样。

我认为您需要在某种程度上重构您的代码。 例如，您可以尝试使用craco覆盖 CRA 配置。