NextJS 引入 Ant-Design 样式闪烁问题

Dreamy_lin

已于 2023-10-01 16:17:46 修改

阅读量616

点赞数 1

文章标签： ant-design nextjs

于 2023-09-24 21:21:39 首次发布

本文链接：https://blog.csdn.net/dreamy_lin/article/details/133252450

版权

官网其实已经给出了解决方案，所以多看文档，hh…
Next 中引入 Ant-Design

在这里插入图片描述

或者按照给的样例，抽出关键代码

步骤：

安装包：

 npm i @ant-design/static-style-extract

引入这俩文件
在这里插入图片描述

genAntdCss.tsx: 会帮我们生成 ./public/antd.min.css

// src/scripts/genAntdCss.tsx

import { extractStyle } from "@ant-design/static-style-extract";
import fs from "fs";

const outputPath = "./public/antd.min.css";

// 1. default theme

const css = extractStyle();

// 2. With custom theme

// const css = extractStyle(withTheme);

fs.writeFileSync(outputPath, css);

console.log(`🎉 Antd CSS generated at ${outputPath}`);

tsconfig.node.json:

{
  "compilerOptions": {
    "strictNullChecks": true,
    "module": "NodeNext",
    "jsx": "react",
    "esModuleInterop": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

package.json 加入脚本，帮我们提前执行 genAntdCss.tsx

{
    "predev": "ts-node --project ./tsconfig.node.json ./src/scripts/genAntdCss.tsx",
    "prebuild": "cross-env NODE_ENV=production ts-node --project ./tsconfig.node.json ./src/scripts/genAntdCss.tsx"
}

在 _app.tsx 引入 '../../public/antd.min.css':

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import '../../public/antd.min.css';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}