根本原因是less编译链断裂和多入口重复导入：必须确保antd.less仅被全局唯一入口（如src/theme.less）导入一次，组件级文件改用@import (reference)引用变量，禁用所有冗余@import，否则触发多次全量编译导致css重复膨胀。
Ant Design 的 Less 主题定制中，CSS 重复输出根本不是变量写错或颜色没生效的问题，而是编译链路和导入方式失控导致的——同一份样式被多次展开、同一组 @import 被不同入口反复触发，最终产物里出现几十个重复的 .ant-btn 块、成倍膨胀的选择器。
为什么 @import 'antd/dist/antd.less' 会触发重复样式？
直接在多个组件级 Less 文件里写 @import 'antd/dist/antd.less'，等于让每个文件都完整编译一遍 Ant Design 全量样式。哪怕只改一个按钮圆角，也会把整个 grid、typography、form 全部重生成一遍。
- 每个
@import都是独立作用域，antd.less里所有.ant-*类都会无差别输出 - Webpack 不会去重 Less 编译结果，只按文件路径打包，
button.module.less和table.module.less各引一次，CSS 就翻倍 - 即使你只用了
Button和Input，antd.less仍会把Tree、Timeline的样式也塞进来
怎样用 @import (reference) 切断冗余输出？
@import (reference) 是 Less 提供的“只导入不输出”机制，它让变量、Mixin 可被引用，但不会把 .ant-* 类写进最终 CSS —— 这是控制重复输出最轻量、最确定的手段。
- 所有共享变量必须放在
variables.less或theme.less中，并用@import (reference) './variables.less';引入 -
antd/dist/antd.less只能被 全局唯一入口文件（如src/theme.less）导入，且不能加(reference)—— 它需要真实输出样式 - 组件级样式文件（如
Dashboard.module.less）只能@import (reference)自己的局部变量或 Mixin，绝不能@import任何含.ant-的文件
构建时如何避免 antd.less 被多入口触发？
Webpack 默认对每个 .less 文件单独执行 less-loader，如果多个路由模块各自 @import 了 antd.less，就等于启动了多次编译进程。
- 删掉所有组件文件里的
@import '~antd/dist/antd.less'，只保留在src/theme.less中 - 确保
src/index.tsx最顶部只有一行import './theme.less';，且它在import 'antd'之前 - CRA 项目必须配
craco-less并启用javascriptEnabled: true，否则modifyVars不生效，theme.less里的变量会被忽略，导致 fallback 到默认样式，反而触发二次引入 - 检查 Webpack 构建产物中的 CSS 文件名，如果看到
dashboard.chunk.css和user.chunk.css都含.ant-btn，说明入口拆分没控制好，得回退到单入口 + 动态import('./styles/route-dashboard.less')
真正难的不是写对 @primary-color，而是让整个 Less 编译过程只跑一次、只输出一次、只在该出现的地方出现——变量定义位置、@import 类型、Webpack 入口组织，三者缺一不可。漏掉任意一环，压缩工具都救不回那多出来的 80KB CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
