Less变量覆盖无提示，因编译时扁平合并作用域，后定义者生效但不报错；调试需用lessc --lint检查重复定义，并统一收口至variables.less，禁用裸名与嵌套引用。
Less变量名被覆盖后怎么查不到源头？
因为Less默认把所有@import进来的文件扁平合并到一个作用域里编译，@primary-color在A文件定义、B文件又定义一次，后者直接生效，但调试时根本看不出是哪个文件写的。浏览器开发者工具只显示最终CSS，不显示变量来源。
- 打开浏览器的Styles面板，点中某条样式，右侧“Rules”里看不到变量定义位置，只有编译后的值
- 搜索项目里所有
@primary-color，可能搜出十几处，但不知道哪处实际生效 - 用
lessc --verbose编译会报错，但不提示冲突，只报语法错误类问题
为什么不能用@primary-color: @blue;嵌套引用？
嵌套引用会让变量依赖链变长，一旦@blue没定义或拼错，整个编译会静默失败——Less不会报错，而是把@primary-color当成未解析字符串原样输出，结果生成color: @blue;这种非法CSS，浏览器直接丢弃整条规则。
- 必须用直赋值：
@primary-color: #007bff;，禁止@primary-color: @blue; - 所有公共变量统一收口到
variables.less，且只允许这个文件定义，其他文件只@import不重定义 - 用
lessc --lint检查变量是否被重复定义（需Less 4.0+）
如何让不同模块的@btn-color互不干扰？
靠命名空间硬隔离，不是靠文件路径或@import顺序。Less没有模块级作用域，所有变量全局可见，唯一可控方式是加前缀。
- 模块A写
@user-btn-color: #0056b3;，模块B写@admin-btn-color: #dc3545; - 禁止裸名：
@btn-color、@color、@size这类泛化名必然撞车 - 配合
&嵌套生成BEM类名：.user-btn { color: @user-btn-color; &__icon { margin-right: 4px; } }
Webpack里变量冲突却查不到@import顺序问题？
Less本身不控制@import顺序，它只是按代码书写顺序展开。但Webpack的less-loader可能并行处理多个入口，导致variables.less被多次加载，变量被反复覆盖。
- 入口文件（如
index.less）只@import一层：顶层模块，不直接@importmixins或工具文件 - 所有模块文件强制用
.module.less后缀，避免被其他loader误处理 - 在
vue.config.js或webpack.config.js里关掉less-loader的javascriptEnabled（除非真要用JS表达式）
变量冲突最难 debug 的地方在于：它不报错、不警告、不中断构建，只悄悄替换掉你认为“应该生效”的那个值。最稳妥的做法是放弃“靠顺序控制变量”，转而用带业务语义的长变量名+单点定义约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
