less编译失败导致变量未生效，因工具静默忽略错误、@import顺序不当、单文件组件作用域隔离、连字符命名解析异常及声明缺分号等原因。
这不是变量没“编译”，而是 Less 根本没编译成功——你看到的 @primary-color 这类占位符，是编译器在报错中断后原样输出的源码片段。
Less 编译失败但构建流程没报错
很多工具（比如旧版 lessc、VS Code 的 Easy LESS 插件、或配置宽松的 Webpack）遇到 NameError: variable @primary-color is undefined 时，只打警告甚至完全静默，继续把未处理的 Less 源码当 CSS 输出。结果浏览器里看到的是 color: @primary-color;，而不是报错弹窗。
-
lessc命令需加--strict-imports或升级到 v4.2+ 并启用throwOnImportError: true - Webpack 中
less-loader必须显式设throwOnImportError: true，否则默认忽略 import 失败 - Vue CLI 项目要检查
vue.config.js是否漏配css.loaderOptions.less.javascriptEnabled = true，否则@import解析失败却不提示
@import 顺序错误导致变量不可见
Less 的 @import 是线性执行、无预加载机制。变量必须在引用前定义，哪怕文件物理路径再近也没用。
- 错误写法：
.btn { color: @primary-color; }写在@import "./vars.less";前面 → 编译报错 - 正确做法：所有入口文件（如
main.less）第一行必须是@import "variables.less"; - 警惕空文件：某个
@import指向的 .less 文件存在但内容为空，会中断后续导入链，导致后面所有变量失效
Vue 单文件组件中变量未注入
<style lang="less"></style> 是独立编译上下文，不继承项目级变量。你在 src/styles/vars.less 里写的 @primary-color，对组件内样式完全不可见。
- 方案一：在每个
<style></style>块顶部手动@import "@/styles/vars.less"; - 方案二：Webpack 配置
less-loader的additionalData，全局注入变量（推荐）：lessOptions: { additionalData: `@import "@/styles/vars.less";` } - 别用
@import (reference)试图“共享”变量——它只抑制 CSS 输出，不解决作用域问题
连字符命名触发解析失败
Less 对变量名有隐式规则：@btn-primary-color 这种含连字符的写法，会被解析器当作 @btn - primary - color（减法运算），而非一个变量名。
- 现象：
@btn-primary-color: #007bff;定义后，color: @btn-primary-color;报variable is undefined - 修复：改用驼峰
@btnPrimaryColor，或加引号@'btn-primary-color'（Less 4.0+ 支持） - 声明必须带分号：
@spacing-xs: 4px;少了;，该行及之后所有变量声明都会被跳过
最常被忽略的点：你以为变量“写了就生效”，其实 Less 编译是纯文本拼接过程，没有模块作用域、没有运行时检查、也没有自动依赖分析——任何一个 @import 路径错、文件空、顺序反、命名非法，都会让整条链上的变量失效，且多数情况下不给你明确提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
