Webpack -不工作后筑巢按建议使用

Question

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

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

我使用postcss-loader在Webpack作为装载机。

  {
    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配置。