less变量在编译期一次性替换为字面量，引用后值即锁死；必须确保变量定义语句在所有引用之前，@import顺序决定可见性，!default仅对首次声明生效，路径须用绝对或相对路径且配置javascriptenabled:true。
变量在被引用那一刻就锁死了值
Less变量不是运行时可变的，它在编译期被一次性替换成字面量。比如button.less里写了color: @primary-color;，而variables.less在它之后才@import，那这行最终就是color: #007bff;（默认值），后面无论你怎么改@primary-color，这行都不会再变。
常见错误现象：
- CSS产物里颜色还是蓝色，但你在
theme.less里明明写了@primary-color: #ff6b35; - 改了变量后热更新没反应，DevTools里看到的仍是旧色值
- 搜索整个项目发现
@primary-color定义了多次，但不确定哪一处生效
关键判断：只要变量在使用前没被定义，它就“不存在”；一旦被引用过，后续重定义对已编译规则完全无效。
@import顺序错位导致变量根本没被看见
@import不是模块加载，而是纯文本拼接。Less按代码书写顺序线性展开，变量必须出现在所有引用它的样式之前——不是“文件在前”，而是“定义语句在前”。
正确顺序（以Ant Design为例）：
-
@import '~antd/lib/style/themes/default.less';→ 基底变量先加载 -
@primary-color: #ff6b35;→ 紧接着覆盖 -
@import '~antd/dist/antd.less';→ 组件样式最后引入
错误写法示例：
.btn { color: @primary-color; }
@import 'variables.less';
这会导致.btn规则中@primary-color未定义，编译结果可能是color: @primary-color;原样输出（非法CSS，浏览器丢弃整条规则），或直接编译为空。
!default只在首次声明时起作用
!default不是“低优先级兜底”，而是“仅当变量尚未被声明过时才生效”。如果Ant Design源码里已有@primary-color: #007bff;，你再写@primary-color: #dc3545 !default;会被完全跳过。
要让!default真正生效，必须满足：
- 它是整个编译流程中对该变量的**第一次出现**
- 它必须出现在任何
@import其他含同名变量文件之前 - 后续覆盖必须用无
!default的直接赋值，例如@primary-color: #ff6b35;
典型陷阱：在themes/dark.less里写@primary-color: #333 !default;，但default.less已经提前定义了它——此时!default形同虚设。
Vite/Webpack中路径和配置让变量“静默失踪”
Vite里@/styles/variables.less这种别名路径，在@import语句中完全不被识别；Webpack中若less-loader配置了include: /node_modules\/antd/，你的自定义theme.less可能压根没走modifyVars流程。
必须检查的硬性条件：
- Vite：
vite.config.ts中css.preprocessorOptions.less必须含javascriptEnabled: true，且additionalData里的路径要用path.resolve(__dirname, 'src/styles/variables.less') - Webpack：
less-loader的lessOptions同样要设javascriptEnabled: true，禁用include限制，改用exclude更安全 - 所有
@import语句里禁止出现@/、~/、src/等别名，只认绝对或相对路径
最容易被忽略的一点：Less变量和CSS自定义属性（--primary-color）毫无关系。你改的是编译期文本，不是浏览器运行时能调试的变量——DevTools里永远看不到@primary-color，只看得到它被替换成的#ff6b35。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
