Less变量覆盖是编译期线性静默替换，后定义同名变量会覆盖之前所有引用；变量无作用域，@import顺序决定可见性，必须将variables.less置于最顶部统一收口，禁用组件内重定义。
Less变量覆盖不是“出错了”，而是编译期线性覆盖行为本身——后定义的同名变量会静默替换前面所有引用，且不报错、不可回溯。你看到的样式错乱，几乎全是变量被意外重写的结果。
为什么改了@primary-color但按钮还是蓝色
根本不是颜色值没生效，而是你在多个地方重复定义了@primary-color，最终生效的是最后一个@import进来的那个。浏览器开发者工具里查不到来源，因为变量在编译阶段就被替换成固定值了，CSS里只留下color: #1890ff这种结果。
- 全局搜索项目中所有
@primary-color:，很可能在button.less、modal.less、theme.less里各有一处 - 检查
@import顺序：如果button.less在variables.less之前被@import，那它里面用的@primary-color就是undefined，Less会静默 fallback 到默认值 - 别信
@import (once)能防覆盖——它只防同一文件重复引入，不改变变量注入顺序
@import顺序错位导致Variable is undefined
Less没有模块作用域，@import只是文本拼接。变量必须出现在使用它的位置之前，否则就是未定义。这不是加载慢，是编译链断了。
- 错误写法：
@import "components/button.less"; @import "variables.less";→button.less里引用@primary-color时，它还没出现 - 正确写法：所有
variables.less、mixins.less必须放在最顶部，且只在一个入口文件（如index.less）里@import - 禁用嵌套
@import：不要在button.less里再@import "mixins.less"，否则依赖关系失控，Webpack可能并行加载导致覆盖
嵌套块里重写@primary-color为什么会改掉全局样式
&嵌套不创建新作用域，@primary-color: red;在.btn { }里写，就是直接覆盖当前编译上下文里的值。之后所有未锁定的引用（比如文件末尾的.link { color: @primary-color; }）都会拿到red。
立即学习“前端免费学习笔记（深入）”；
- 禁止在组件级
.less文件里重定义主题变量，哪怕加了&也没用 - 需要定制？用带参
.btn(@bg: @primary-color) { background: @bg; }，而不是重赋值 - 调试技巧：在文件末尾加
.debug-var { color: @primary-color; }，编译后看输出值，快速验证当前生效的是哪个定义
如何真正隔离不同模块的变量
Less没有天然模块隔离，唯一可控方式是命名空间硬隔离。裸名@color、@size在中大型项目里必然撞车。
- 强制前缀：
@user-btn-bg、@admin-modal-border，杜绝泛化名 - 统一收口到单个
variables.less，且该文件禁止写任何样式规则或.mixin - 用
lessc --lint检查重复定义（需 Less 4.0+），它能发现同名变量多次声明的问题 -
@import (reference)也不能隔离变量——它只是不输出 CSS，变量照样注入全局
最容易被忽略的点是：你以为在button.module.less里改了@primary-color只影响按钮，其实它参与的是整个项目的 Less 编译作用域；而你删掉的那行@import "variables.less"，可能正是让整个主题链断裂的临界点。
