Ant design css 未在 next.js 构建中加载答案

【问题标题】：Ant design css not loading on next.js buildAnt design css 未在 next.js 构建中加载
【发布时间】：2023-02-09 05:56:01
【问题描述】：

我在 Next 项目中使用 AntD 组件，在开发过程中一切正常，但是当我构建项目时，Ant-Design css 无法正确加载。我试过在_app中添加"import 'antd/dist/antd.css'"，所有使用AntD组件的组件和页面都没有用。检查源代码，出于某种原因，只加载了 antd 关键帧例如antSlideUpIn, antdDrawerFadeIn

有什么我想念的吗？这与我使用的顺风有什么关系吗？但是随着 tailwind 被移除，它仍然不起作用。

_app.tsx 的顶部

import '../styles/index.css';
import 'antd/dist/antd.css';

索引.css

/* purgecss start ignore */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* purgecss end ignore */

这与我使用 Tailwind 有什么关系吗？

postcss.config.js

module.exports = {
      parser: 'postcss-scss',
      plugins: [
        'tailwindcss',
        process.env.NODE_ENV === 'production' ?
          [ '@fullhuman/postcss-purgecss', {
              content: [
                './pages/**/*.{js,jsx,ts,tsx}',
                './components/**/*.{js,jsx,ts,tsx}',
              ],
              defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
            },
          ] : undefined,
        'postcss-preset-env',
      ],

tailwind.config.js

module.exports = {
  important: true,
  content: ["./pages/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}",],
  theme: {
    extend: {
      colors: {
        "gamestreet-teal-1": "#59f5ff",
        "gamestreet-purple-1": "#7774ff",
        "gamestreet-purple-2": "#a98bff",
        "gamestreet-purple-3": "#291749",
        "gamestreet-pink-1": "#ff0ff5",
      },
    },
  },
  plugins: [],
}

【问题讨论】：

标签： javascript css reactjs next.js tailwind-css

【解决方案1】：

只是张贴在这里以防其他人遇到这个。 AntD 开发者似乎并不关心 SSR，似乎拒绝支持它。

我发现 this GitHub issue 很多人都在报告同样的事情，但这个问题被关闭为“未计划”。

【讨论】：