为什么任何 postcss 嵌套插件都不起作用？答案

【问题标题】：Why any postcss nesting plugins doesn't work?为什么任何 postcss 嵌套插件都不起作用？
【发布时间】：2022-06-10 19:53:13
【问题描述】：

(4:3) 检测到嵌套 CSS，但未正确配置 CSS 嵌套。请在您的配置中启用 CSS 嵌套插件 before Tailwind。看这里：https://tailwindcss.com/docs/using-with-preprocessors#nesting

我的 postcss.config.js 文件：

  plugins: [
    "postcss-import",
    "tailwindcss/nesting",
    "tailwindcss",
    "autoprefixer",
  ],
};

我试着这样写：

  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

像这样：

  plugins: [
    require("postcss-import"),
    require("tailwindcss/nesting"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

此项目的 Github 存储库：https://github.com/frkam/test-app

当我尝试使用嵌套时，我得到了这个：enter image description here

【问题讨论】：

您使用的是 Create React App，版本 5？ PostCSS 支持存在一些已知问题，现在包含在 Tailwind 中，并且 CRA 5 不允许使用 postcss.config.js 进行覆盖。见：github.com/facebook/create-react-app/pull/…
@EdLucas 是的，我使用 CRA5。据我了解，这个问题的解决方案可能是回滚到以前的版本或使用不同的预处理器。谢谢。
有一个开放的 PR 可以解决这个问题，希望能够实现。您可以在此处关注问题：github.com/tailwindlabs/tailwindcss/discussions/7049

标签： reactjs tailwind-css postcss

【解决方案1】：

正如 Ed Lucas 上面提到的，CRA5 不允许覆盖 postcss.config 但目前你可以使用craco

您可以在 Like Felipe Zavan comment 中找到一个示例

这对我有用。所以我回家会有帮助:)

我的 craco.config

module.exports = {
  style: {
    postcss: {
      loaderOptions: (postcssLoaderOptions) => {
        postcssLoaderOptions.postcssOptions.plugins = [
          require('tailwindcss/nesting'),
          require('tailwindcss'),
          require('postcss-mixins'),
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 0,
            },
          ],
        ]

        return postcssLoaderOptions
      },
    },
  },
}

【讨论】：