Nextjs 9.3 tailwindcss + antd 构建缺少 css

Question

我按照这两个示例来设置 Nextjs + Tailwindcss + Antd 项目：

• nextjs 与 antd
• nextjs-with-tailwindcss

我可以yarn dev没有问题，但是当我尝试yarn build和yarn start项目时，antd 的 css 丢失了。

这是我重现该问题的存储库。

编辑： 我发现当我删除 purge css 插件时，postcss.config.js问题就解决了。所以问题是 purge css 清除了所有外部 css 文件yarn build。我应该如何更新 postcss 配置？

编辑2： 尝试忽略外部文件的清除不起作用：

/* purgecss start ignore */
@tailwind base;
@tailwind components;
@import '~antd/dist/antd.css';
/* purgecss end ignore */

Answer 1

我正在研究 Nextjs + antd。我通过更改 中的配置解决了这个问题postcss.config.js，我提到了ant使用正则表达式的类的特定选择器safelist来选择以 开头的类名ant。

/ant.*/是我使用的表达式，其余配置来自docs。

module.exports = {
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
        features: {
          "custom-properties": false,
        },
      },
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: [
          "./pages/**/*.{js,jsx,ts,tsx}",
          "./components/**/*.{js,jsx,ts,tsx}",
          "./containers/**/*.{js,jsx,ts,tsx}",
          "./features/**/*.{js,jsx,ts,tsx}",
          "./common/**/*.{js,jsx,ts,tsx}",
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body", /ant.*/],
      },
    ],
  ],
};