Less变量未定义导致编译中止，原始占位符残留CSS中；需检查报错日志、配置throwOnImportError、确保@import顺序正确、避免连字符与分号遗漏，并在Vue中通过additionalData全局注入或手动@import。
Less变量未定义不是CSS问题，是编译根本没跑完
你看到的 @primary-color 出现在最终 CSS 里，说明 Less 编译器压根没完成替换——它遇到未定义变量时直接中止，把原始文本原样吐出来。这不是“编译后出错”，而是编译中途退出，连合法 CSS 都没生成。
- 检查控制台或构建日志：真正报错是
NameError: variable @primary-color is undefined，但很多工具（如旧版lessc、VS Code Easy LESS 插件、某些 Webpack 配置）会吞掉这个错误，只留占位符 - Webpack 用户重点查
less-loader配置：必须设throwOnImportError: true，否则错误静默；javascriptEnabled: true不解决变量未定义，反而可能掩盖问题 - Vue CLI 项目里，
<style lang="less"></style>是独立编译上下文，src/styles/variables.less的变量不会自动注入——必须显式@import或用additionalData配置全局注入
@import顺序写反了，变量就永远“看不见”
Less 的 @import 是同步、线性执行的，没有预加载。变量必须在使用前被解析到作用域里，哪怕它就在同一个文件里。
- 错误写法：
.btn { color: @primary-color; }写在@import "./variables.less";前面 → 编译时@primary-color还不存在 - 正确做法：所有变量导入统一收口到入口文件（如
main.less），且放在第一行；子文件禁止反向依赖父文件变量 - 警惕空文件：一个路径存在但内容为空的
.less文件，会让@import链中断，后续所有导入都失效
Vue 单文件组件里 Less 变量“明明写了却 undefined”
Vue 的每个 <style lang="less"></style> 块都是独立 Less 上下文，不共享变量、mixin 或 @import 链。你在全局 variables.less 里定义了 @primary-color，组件里不 @import 就等于没写。
- 方案一（推荐）：在
vue.config.js中配置less-loader的additionalData，全局注入变量：@import "@/styles/variables.less"; - 方案二：组件内手动
@import，但注意路径要相对于当前.vue文件，不是相对于项目根目录 - 方案三：避免在 scoped style 里用变量，改用 CSS 自定义属性（
--primary-color），JS 可读可写，也绕过 Less 作用域限制
变量名拼错、少分号、连字符误用这些细节最常被忽略
Less 对语法宽松得过分：拼错变量名、漏分号、用错连字符（- vs _）都不会报错，但变量就是不生效。
立即学习“前端免费学习笔记（深入）”；
-
@primary-color: #007bff;是非法的——Less 变量名不能含连字符，必须写成@primary_color或@primaryColor - 声明变量必须加分号：
@spacing-xs: 4px少了;，这一行及之后所有变量声明都会被跳过 - 大小写敏感：
@PrimaryColor和@primaryColor是两个变量，别指望它们互通 - 命名空间无效：
.theme { @primary-color: red; }不会创建局部变量，@primary-color仍会污染全局作用域
@import 顺序错 + 变量名带连字符 + 漏分号，日志里只报第一个错误，修完一个才发现下一个。建议从入口文件开始逐行注释排查，而不是凭感觉改。 
