Less 中不存在 CSS 变量作用域，@primary-color 是编译期文本替换，嵌套中重写会全局覆盖后续引用；@import 是线性拼接，顺序错误导致 undefined；变量无隔离，需强制前缀；modifyVars 需配合 javascriptEnabled: true 才生效。
Less 里根本不存在“CSS 变量作用域”，你写的 @primary-color 不是 CSS 自定义属性，它只是编译期的一次性文本替换；所谓“覆盖冲突”，其实是变量被后声明的同名值静默改写，所有后续引用全跟着变——这不是 bug，是 Less 编译器的设计逻辑。
为什么嵌套里重写 @primary-color 会改掉全局样式
Less 的 & 嵌套不产生变量作用域，.btn { @primary-color: red; color: @primary-color; } 这行不是“局部赋值”，而是直接覆盖当前编译上下文里的 @primary-color 值。之后所有未锁定的引用（包括文件末尾的 .link { color: @primary-color; }）都会拿到 red。
- 变量表是扁平、可变、线性处理的，不是栈式作用域
- 浏览器开发者工具看不到哪一层嵌套改了变量，只能靠全局搜索
@primary-color定位 - 已生成的 CSS 不会回溯重算：如果按钮样式在重定义前就被编译，改了也没用
@import 顺序错位导致 Variable is undefined
Less 的 @import 是纯文本拼接，不是模块加载。变量必须在使用前定义，顺序错了就找不到。
- 错误顺序：
@import "button.less"; @import "variables.less";→button.less里引用的@primary-color还没出现 -
@import (once)只防同一文件重复引入，不解决顺序问题 - Webpack 中
less-loader可能并行处理多个入口，variables.less被多次引入，变量反复覆盖
命名没隔离，@primary-color 在多个文件里被重定义
多个组件文件（如 button.less、modal.less）各自定义 @primary-color，最终生效的是最后一个 @import 进来的值——这不是冲突，是设计行为。
- 禁止裸名：
@color、@size必然撞车 - 强制模块前缀：
@btn-primary-bg、@modal-header-padding -
@import (reference)也不能隔离变量——它只是不输出 CSS，变量照样注入全局
误把 modifyVars 当万能开关，却漏了 javascriptEnabled: true
Ant Design 等库的主题变量大量依赖 Less 内联 JS 表达式（比如 color(~`colorPalette('@primary-color', 5)`)），没开 JS 支持，modifyVars 就形同虚设。
- less-loader@8+ 必须显式设
lessOptions.javascriptEnabled: true - Vite 中需在
vite.config.ts的css.preprocessorOptions.less里同样配置 - Webpack 中若对
node_modules/antd加了include，你的自定义主题文件可能根本没走modifyVars流程
真正难调试的点在于：Less 编译器不会报“变量被覆盖”警告，也不会告诉你哪个文件悄悄改了 @primary-color；你得靠编译输出比对 + 全局搜索 + 手动加 .debug { color: @primary-color; } 来验证当前值来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
