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);
  }
}

我在 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

Post-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，如 this thread.

所示

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

Webpack - Postcss 嵌套无法按建议使用

Webpack - Postcss nesting not working used as suggested

css

typescript

postcss

postcss-loader

更新