less变量覆盖是构建阶段静态替换，需在@import链顶端声明且不可被后续同名声明覆盖；!default仅在首次定义时生效；modifyvars配置须严格匹配@符号与大小写。
Less变量覆盖不是“运行时换肤”，而是构建阶段的静态值替换；生效前提只有两个：变量必须在所有引用它的地方之前定义，且不能被后续同名声明意外覆盖。
变量必须在@import链最顶端声明
Less的@import是静态拼接，不是动态加载。一旦某个文件里写了@primary-color: #1890ff;，后面再@import一个含@primary-color: #52c418;的文件也无效——编译器已经用掉旧值了。
- 正确顺序：
@import "variables.less";→@import "~antd/dist/antd.less"; - 错误顺序：
@import "~antd/lib/style/themes/default.less";→@import "variables.less"; - 第三方库（如Bootstrap）通常要求
variables.less在functions.less之后、mixins.less之前，否则部分变量依赖函数会报错
!default只在首次声明时起作用
!default不是CSS变量里的var(--color, #fff) fallback机制，它只在变量**此前完全未被定义过**时才生效。很多人把它写在主题文件末尾，结果根本没机会触发。
- 安全写法：在项目入口
index.less第一行就写@primary-color: #1890ff !default; - 禁止写法：
@primary-color: #007bff;（已在别处定义）→@primary-color: #dc3545 !default;（此时!default被忽略） - 递归引用会报错：
@bg: lighten(@bg, 10%) !default;—— 变量右侧不能直接引用自身
Webpack中modifyVars配置要带@符号且大小写严格匹配
less-loader的modifyVars是构建期注入，和@import并存时优先级更高，但键名漏一个@或大小写错一位，整个配置就静默失效。
- 生效写法：
modifyVars: { '@primary-color': '#52c418', '@text-color': '#111' } - 失效写法：
'primary-color'（缺@）、'@TextColor'（大小写不一致）、'@primary_color'（下划线风格不匹配） - 值必须是字符串：
'fade(@primary-color, 70%)'✅，hexToRgba(primaryColor, 0.7)❌（JS函数不识别）
组件内不要重定义全局变量
在.button { @primary-color: red; }这种嵌套块里改@primary-color，只影响当前块内样式，不会改变其他组件所用的值，反而容易造成维护混乱。
- 更可控的做法：用参数化
.btn-style(@bg: @primary-color)封装，把颜色作为输入显式传递 - 禁止在
Button.less里@import "variables.less"——变量已在顶层注入，重复导入可能引发覆盖冲突 - 所有样式声明必须使用变量：
background: @primary-color;✅，background: #1890ff;❌（绕过变量=换肤失效）
最容易被忽略的是：Less变量没有“作用域继承”概念，只有“定义顺序决定最终值”。哪怕你把variables.less放在Git仓库最深处，只要它没出现在@import链最前面，它就只是个被编译器跳过的文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
