结论是less未编译成功，因变量未定义导致编译中断并输出原始占位符；常见原因包括import顺序错误、构建工具静默忽略错误、vue单文件组件未显式注入变量、连字符误用及作用域问题。
直接说结论：这不是编译后 CSS 的问题，而是 Less 根本没编译成功。你看到的类似 @primary-color 这种占位符，是 Less 编译器在遇到变量未定义时提前中止、直接把原始代码原样输出的结果——它压根没生成合法 CSS。
Less 编译失败时会“透出”变量名而不是报错？
不是“透出”，是编译中断后保留了未处理的源码片段。Less 解析器在遇到 @primary-color 但找不到定义时，会抛出 NameError: variable @primary-color is undefined，但某些构建工具（如旧版 lessc 命令行、Winless、或配置不当的 Webpack）可能只显示警告、不阻断构建，或把错误日志压到后台，导致你只看到最终输出里残留了 @primary-color。这种现象多见于：
- 使用了
lessc --no-js或其他宽松模式 - Webpack 中
less-loader配置了javascriptEnabled: true但未开启throwOnImportError: true - 编辑器插件（如 VS Code 的 Easy LESS）静默忽略错误并输出原始文本
为什么 import 顺序会导致变量“看起来已定义却仍报错”？
Less 的 @import 是同步、顺序执行的，没有“全局预加载”概念。哪怕 variables.less 放在项目根目录，如果某个组件 component.less 在开头就写了 color: @primary-color;，而它自己的 @import 语句写在后面，变量就不可见。
常见错误写法：
.btn {
color: @primary-color; // ← 此时 @primary-color 尚未导入
}
@import "./variables.less"; // ← 太晚了
正确做法是确保所有变量定义在任何引用之前：
- 统一入口文件（如
main.less）里最先@import "variables.less"; - 避免在被
@import的子文件里反向依赖父文件变量 - 检查是否有空的、路径存在但内容为空的
.less文件——它们会打断 import 链，导致后续文件无法加载
Vue CLI / Webpack 项目里变量“明明写了却 undefined”？
Vue CLI 默认不会自动注入全局变量。你在 src/styles/vars.less 里写了 @primary-color: #007bff;，但在组件 .vue 的 <style lang="less"></style> 块里直接用 @primary-color，它就是 undefined——因为每个 <style></style> 是独立编译上下文，不共享变量。
必须显式注入：
- 装
style-resources-loader，并在vue.config.js中配置patterns指向变量文件 - 或升级到
less-loader@11+，改用additionalData选项自动前置注入：@import "@/styles/vars.less"; - 注意路径别用
~或@别名——loader 不解析这些，要用相对路径或绝对路径（如path.resolve(__dirname, "src/styles/vars.less")）
减号、下划线、拼写引发的“假 undefined”
Less 解析变量名时，- 是合法字符，@width-20 被当作一个变量名，而不是 @width 减去 20。如果你本意是运算，却写了：
margin: @width-20; // ← 查找变量 @width-20，不是 @width - 20
结果就是 Variable @width-20 is undefined。这类错误不会报语法错，只会报变量不存在。
解决方式只有两个：
- 加空格：
@width - 20 - 或改名避开连字符：
@width_20或@width20
另外，大小写敏感（@PrimaryColor ≠ @primaryColor）、中文空格、BOM 字符、以及变量定义在 .mixin() 内部却试图在外部调用，都会触发同一类报错——表面是“未定义”，实际是作用域或解析层面的失配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
