如何在Ant Design 5项目中继续使用CSS和Less

Ant Design 5 可通过 Less 构建时编译定制主题，需先导入 antd.variable.less 再覆盖变量，用 lessc --js 编译为独立 CSS；不可与 ConfigProvider.theme 混用，SSR 场景必须用此方案。

Ant Design 5 默认启用 CSS-in-JS，但你完全可以在项目中继续用 Less 编译主题、用纯 CSS 引入样式——只要绕开最新默认的运行时样式注入链，走构建时编译路径即可。

为什么直接 import 'antd/dist/antd.css' 后改 Less 变量无效？

因为 antd/dist/antd.css 是预编译好的静态文件，变量早已固化成具体颜色和尺寸。你在 Less 文件里重写 @primary-color，对它毫无影响——它根本没参与编译过程。

1. 所有自定义变量必须在 antd/dist/antd.variable.less（v5）或 antd/dist/antd.less（v4 兼容模式）加载前注入
2. 不能在组件级 Button.module.less 里覆盖全局变量，作用域不生效
3. Webpack 项目需确保 less-loader 配置了 javascriptEnabled: true，否则 color(~`@{primary-color}`) 类函数会报错

如何用 Less 编译出一套可 CDN 引入的 antd 主题 CSS？

目标是生成一个独立的 my-theme.css，不依赖 JS 运行时，适合 SSR、微前端或传统 HTML 页面直接 <link> 引入。

1. 新建 src/theme.less，第一行必须是 @import "antd/dist/antd.variable.less";（v5）或 @import "antd/dist/antd.less";（v4 兼容）
2. 紧接着写变量覆盖，例如：@primary-color: #13c2c2;、@border-radius-base: 4px;，不要加 !important 或重写选择器
3. 用 lessc --js src/theme.less dist/my-theme.css 编译，--js 参数不可省——v5 的 antd.variable.less 内含 JS 计算逻辑
4. 若用 Node.js 脚本调用，传入选项 { javascriptEnabled: true }

ConfigProvider.theme 和 Less 主题能混用吗？

不能。二者属于完全不同的机制：前者是运行时 CSS Variables 注入，后者是构建时 class 名+值固化。混用会导致样式冲突或覆盖失效。

1. ConfigProvider 修改的 token 会生成 --ant-primary-color 等 CSS 变量，由 JS 动态写入 :root；而 Less 编译结果里全是 .ant-btn { color: #13c2c2; } 这类硬编码
2. 如果用了 ConfigProvider，就别再引入自己编译的 Less CSS，否则按钮颜色可能被两套规则反复覆盖
3. SSR 场景下优先选 Less 编译方案——服务端无法执行 JS 注入 CSS 变量，ConfigProvider 的 theme 在首屏会失效

真正麻烦的不是写几行 Less，而是变量注入时机和编译链路是否完整。漏掉 --js、错放 @import 顺序、或留着 antd.css 不删，都会让整个主题定制静默失败。