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

Question

(4:3) 已检测到嵌套 CSS，但 CSS 嵌套尚未正确配置。请在配置中的 Tailwind之前启用 CSS 嵌套插件。请参阅此处： 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

当我尝试使用嵌套时，我得到以下信息：在此处输入图像描述

Answer 1

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

您可以在 Felipe Zavan评论中找到一个示例

这对我有用。所以我希望这会有所帮助:)

我的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
      },
    },
  },
}