@primary-color未生效是因less编译链断裂：必须在antd.less加载前通过theme.less按顺序导入default.less、重定义变量、再导入antd.less，且需启用javascriptenabled、禁用antd.css。
为什么直接改@primary-color没生效
不是变量写错了，是 Less 编译链断了。@primary-color必须在antd.less加载前被解析并注入，否则所有组件样式都按默认值编译完毕，你改的变量等于没发生。
常见失效路径包括：
- 把
@primary-color: #ff6b35;写在Button.module.less里——作用域太小，不参与全局主题构建 - 在
import 'antd/dist/antd.css'之后再import自定义样式——CSS 已静态生成，变量覆盖无效 - 用 CRA 却没配
craco-less或lessOptions.modifyVars——Webpack 根本没把你的变量传给less-loader -
@import '~antd/lib/style/themes/default.less'路径少个/或拼错themes——导入失败，后续所有变量声明全跳过
theme.less的正确导入顺序
只有一条链路能保证变量生效：基底变量 → 重定义 → 组件样式。缺一不可，顺序不能调。
新建src/theme.less，内容严格按此顺序：
@import '~antd/lib/style/themes/default.less'; @primary-color: #ff6b35; @border-radius-base: 6px; @font-size-base: 14px; @import '~antd/dist/antd.less';
并在src/index.tsx最顶部（任何其他import之前）写：
import './theme.less';
同时删掉项目中所有import 'antd/dist/antd.css'——它和 Less 编译冲突，留着必失效。
javascriptEnabled: true不是可选项
modifyVars依赖javascriptEnabled: true才能解析 Ant Design 里大量使用的 JS 表达式，比如color(~`colorPalette('@primary-color', 5)`)。否则会静默 fallback 到默认值。
配置要点：
-
less-loader@8+必须在lessOptions中显式设javascriptEnabled: true - Vite 用户检查
vite.config.ts中css.preprocessorOptions.less是否同样设置了该选项 - Webpack 配置里若写了
include: /node_modules\/antd/，会导致你项目目录下的theme.less根本不走less-loader的modifyVars流程——删掉或改用exclude
别信!default能当运行时 fallback
Less 的!default只在编译期起作用，且仅当该变量此前完全未被声明过才生效。它不是 CSS 自定义属性里的var(--primary-color, #1890ff)那种运行时 fallback。
典型误用：
-
@primary-color: #007bff !default;写在themes/dark.less里，但入口先@import 'base.less'，而base.less里已有@primary-color: #333;——此时!default彻底失效 -
@primary-color: lighten(@primary-color, 10%) !default;——右侧表达式引用未落定的自身，报Recursive variable definition
真正可控的做法是分层管理：vars-base.less放带!default的初始声明，vars-user.less放无!default的强制赋值，入口按序@import。
最容易被忽略的是：变量改了，但没确认它是否真穿透到了每一条样式声明里。换主题不是换空气，得看最终生成的 CSS 里.ant-btn背景色是不是你设的#ff6b35——建议打开 DevTools 的 Styles 面板直接搜background验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
