根本原因是@import顺序错误或作用域隔离：Less变量需在使用前通过顶部@import同步加载，单文件组件中无法跨<style>共享，必须用absolute path配合additionalData注入或每个组件显式导入。
Less 导入文件后变量无法使用，根本原因是变量定义没在引用前生效——不是语法错，而是作用域和加载顺序没对上。
为什么 @import 了 variables.less 却提示 @primary-color undefined
Less 的 @import 是顺序执行、同步展开的，没有“预加载”或“全局注册”机制。哪怕 variables.less 存在且路径正确，只要它出现在引用语句之后，就无效。
- 错误写法：
.btn { color: @primary-color; } @import "variables.less";→ 编译到color行时变量尚未声明 - 正确做法：所有
@import必须放在文件最顶部，且variables.less要排在第一个 - 检查是否误用了
@import (reference)：它只注入 mixin/变量，但不保证执行顺序；如果variables.less里用了@import其他文件，而那些文件又依赖未声明的变量，整个链路会静默中断 - 空文件或注释开头的 .less 文件也会导致后续
@import失效——Less 解析器遇到空内容会跳过，不报错也不继续
Vue 单文件组件里用不了全局 Less 变量
Vue CLI 或 Vite 中，每个 <style lang="less"> 是独立编译上下文，@import 不跨组件共享。你在 src/styles/variables.less 里写了 @primary-color: #007bff;，但在 Button.vue 里直接写 color: @primary-color;，就是 undefined。
- 不能靠项目根目录放一个 variables.less 就万事大吉
- 必须在每个需要变量的
<style>块里显式@import "./../styles/variables.less"; - 更稳的方式是用构建工具的
additionalData配置自动注入（但注意：路径必须是绝对路径，别名如@/styles/variables.less会被 Less 引擎忽略） - Vite 用户常见坑：
additionalData: `@import "@/styles/variables.less";`看似方便，实际静默失败——得写成`@import "${path.resolve(__dirname, 'src/styles/variables.less')}";`
为什么 import 后变量值变了，但样式没更新
Less 变量不是响应式的，它是编译期一次性替换。你在嵌套块里重写 @primary-color: red;，不会局部生效，而是直接覆盖当前作用域里的值，影响后续所有未锁定的引用。
立即学习“前端免费学习笔记（深入）”；
-
.theme-dark { @primary-color: #333; .btn { color: @primary-color; } }→ 这个@primary-color会影响后面所有.link { color: @primary-color; }，不管它在不在.theme-dark内 - 没有“块级作用域”，
&嵌套不隔离变量，只控制选择器生成 - 修改变量后样式没变？先确认你改的是被实际编译的那行——比如变量定义在
@import之后，或者被更早的同名声明锁死了 - 调试技巧：在疑似生效位置加一条
.debug { color: @primary-color; }，看输出值，比猜快得多
Webpack / Vite 构建中变量“时有时无”
构建工具可能吞掉 Less 错误，让你只看到 CSS 输出里残留 @primary-color，而不是报错。这不是 CSS 问题，是 Less 根本没编译成功。
- less-loader 默认不阻断构建，
NameError: variable @primary-color is undefined可能只打在终端日志末尾，被滚动刷走 - 检查 Webpack 配置是否开了
throwOnImportError: true；Vite 用户要确认css.devSourcemap和css.modules.generateScopedName没干扰变量解析 - VS Code 的 Easy LESS 插件常静默忽略错误，输出原始文本——关掉它，用命令行
lessc main.less直接验证 - Windows 下路径分隔符（
\vs/）可能导致additionalData拼接失败，务必用path.resolve()
真正难的不是让变量“出现”，而是确保它在每一个编译入口、每一层嵌套、每一次 HMR 更新中，都按你预期的顺序和作用域被读取——变量名相同、路径差一级、导入顺序错一位，都可能让样式无声失效。
