【问题标题】：Webpack - Postcss nesting not working used as suggestedWebpack - Postcss 嵌套未按建议使用
【发布时间】：2022-02-18 03:20:23
【问题描述】：

我有一个使用嵌套规则的简单 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,
                },
            },
        }),
    ],
});

【问题讨论】：

您的颜色变量是否定义在任何地方？这些定义是否包含在生成的 css 中？
你确定 webpack 正在读取你的配置吗？
@Tschallacka 更新了我的问题。
@AndrewGillis 更新了我的问题。
我在这里复制了你的步骤，它对我有用。您能否将项目中的示例放入 Codesandbox 或类似工具中并与我们分享？

标签： css typescript webpack postcss postcss-loader

【解决方案1】：

您正在使用create-react-app。恐怕它还不支持postcss.config.js，见this thread。

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

【讨论】：