less变量作用域失效本质是变量被覆盖、未定义或加载顺序错误；@import必须置于顶部，否则变量未定义即报错，嵌套不隔离变量，构建产物含@variable说明less未编译。
Less变量作用域失效，本质不是“作用域丢了”，而是变量被覆盖、未定义或加载顺序错——它不会报错，只会静默用错值。
为什么 @import 放后面就报 Variable is undefined
Less 的 @import 是纯文本拼接，不是模块加载。编译器从上到下逐行读取，变量必须出现在使用它的语句之前。
- 错误写法：
@import "button.less"; @import "variables.less";→button.less里引用的@primary-color还没出现 - 正确写法：所有
variables.less、mixins.less必须放在文件最顶部，且排在第一位 -
@import (once)或@import (reference)不解决顺序问题，只防重复引入 - 空文件、只有注释的
.less文件会让后续@import静默跳过，不报错也不继续
嵌套里改了 @primary-color 为什么全局都变了
Less 没有块级作用域，& 嵌套只影响选择器生成，对变量完全无隔离。在 .card { @primary-color: #e74c3c; } 里重声明，等于直接覆盖当前编译上下文里的值。
- 该变量后续所有引用（包括同文件后面的
.btn、其他@import进来的文件）都会拿到新值 - 浏览器 DevTools 看不到这个覆盖发生在哪一层，只能靠全局搜索 + 编译后 CSS 对比
- 想局部定制？用参数化
mixin：.btn-style(@bg: @brand-blue) { background: @bg; }，调用时传参 - 禁止在嵌套中写
@primary-color: ...;—— 它不是局部赋值，是全局污染
构建产物里还有 @primary-color 字样说明什么
这代表 Less 根本没编译，变量原样输出，浏览器直接忽略整条规则。
- 检查构建工具是否启用了
less-loader（Webpack）或preprocessorOptions.less（Vite） - 确认
javascriptEnabled: true已开启，否则 Ant Design 等库的 colorPalette 表达式会 fallback 到默认值 - 查
less-loader版本是否匹配 Webpack：Webpack 5 需less-loader@8+；Vite 用户注意additionalData中路径必须是绝对路径，别名如@/styles/variables.less会被忽略 - 运行
npx lessc --version确认本地 Less 版本 ≥ 3.8.0（尤其涉及append()或+()合并时）
怎么快速验证变量到底有没有生效
别依赖视觉判断，直接看编译结果和运行时值。
- 在
variables.less最末尾加一句：.debug-test { color: @primary-color; }，然后在浏览器里搜.debug-test查生成的 CSS 值 - 打开 DevTools → Elements → 选中
→ Computed 面板搜索--primary-color（CSS 变量）或看样式是否含color: #xxx（Less 变量已替换） - 执行
getComputedStyle(document.documentElement).getPropertyValue('--primary-color')，若返回空字符串且 Computed 面板里没这个变量，说明根本没声明 - 如果用了 Ant Design，务必删掉
import 'antd/dist/antd.css'—— 它和 Less 主题链互斥，留着必失效
真正难排查的从来不是语法，而是变量在哪被谁悄悄覆盖了。Less 的作用域模型就是扁平+线性，接受这点，才能把 @import 顺序、单点定义、前缀命名当成硬约束来执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
