less变量按声明顺序生效，同名变量后声明不覆盖前引用；必须在使用前声明，!default仅防未定义报错，无覆盖能力，ant design中需在default.less前注入自定义变量。
Less变量名相同却没被覆盖，不是编译器“没生效”，而是你写的那行根本没参与编译——要么顺序错了，要么被跳过了，要么压根没被解析。
变量声明位置决定是否生效
Less变量在引用那一刻就被固化为字面量，后续同名定义完全无效。比如：
.btn { color: @primary-color; }
@primary-color: #007bff;
这段代码里，.btn规则里的@primary-color在编译时找不到定义，最终输出color: @primary-color;（非法 CSS，浏览器直接丢弃整条规则），而不是“用默认值”。它不是“没覆盖”，是“根本没定义成功”。
- 变量必须在所有使用它的语句之前声明，不能靠“后声明覆盖前引用”
-
@import顺序就是声明顺序：@import "vars.less";必须写在@import "button.less";前面 - Webpack 中多个入口并行加载时，
vars.less可能被重复引入，导致变量被多次覆盖，最终生效的是最后一次
!default 不是“低优先级覆盖”，而是“仅首次有效”
@primary-color: #dc3545 !default;只在@primary-color尚未被声明过时才起作用。Ant Design 的 default.less 里已经写了@primary-color: #007bff;，你再写一遍带!default的，就直接被忽略。
- 检查项目中所有
@primary-color定义，找到第一个出现的位置——它才是实际生效的那个 -
!default无法用于“覆盖已有值”，只能防止未定义时报错 - 在 Ant Design 场景下，
default.less是提前加载的，你的自定义变量必须在它之前注入，否则!default形同虚设
嵌套里重写变量 ≠ 局部作用域
.card { @primary-color: #2d2d2d; color: @primary-color; } 这种写法不是给.card设局部变量，而是把整个文件里后续所有@primary-color都改成#2d2d2d。
- 变量表是扁平、线性、可变的，没有栈式作用域
- 浏览器开发者工具里看不到哪一层改了变量，只能全局搜索
@primary-color定位 - 如果
.btn样式在.card块之前就被编译，那么.btn颜色不会变——不是覆盖失败，是它压根没机会读到新值
最常被忽略的一点：变量冲突不报错，也不警告。你改了十处@primary-color，编译器默默选最后一个，然后生成一堆颜色错乱的 CSS，而你还在 DevTools 里反复刷新看“为什么没变”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
