根本原因是less编译器在解析阶段因变量未定义而中断，未生成合法css；你看到的@primary-color等是原始源码被原样透出，非编译结果。

Less 编译时出现未定义变量的报错，根本原因不是 CSS 本身出错，而是编译器在解析阶段就中断了——它压根没生成合法 CSS，你看到的 @primary-color 或 color: @text-color; 这类输出，是原始源码被原样“透出”，不是编译结果。

变量未定义会直接中断编译，不会 fallback

Less 没有运行时变量检测机制。写 @color 却没声明，编译器立刻抛出 NameError: variable @color is undefined 并终止。它不会像 JavaScript 那样走 ?? 或默认值逻辑，也不支持 if(@color, @color, #333) 这种写法——语法非法，连解析都过不去。

• 所有变量必须在引用前显式声明，且拼写、大小写、作用域完全匹配
• 哪怕只差一个连字符（@btn-color vs @btn_color），也会报错
• 嵌套规则中引用外层变量没问题，但引用“兄弟级”文件里的变量，必须靠 @import 顺序保证可见性

@import 顺序错误是最常见的真凶

Less 的 @import 是同步文本拼接，不是模块加载。变量作用域是线性扁平的：谁在前面定义，后面才能用。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 错误模式：.btn { color: @primary-color; } 写在 @import "variables.less"; 之前 → 报错
• 正确做法：入口文件（如 main.less）第一行必须是所有变量和 mixin 的 @import
• @import (once) 或 @import (reference) 不改变变量注入顺序，只控制样式是否输出
• 空的或路径存在但内容为空的 .less 文件，会静默打断 @import 链，导致后续变量不可见

构建工具可能掩盖错误，让你误以为“编译成功”

某些环境会吞掉编译错误，只输出带占位符的“伪 CSS”，让人误判问题在 CSS 层。

• lessc --no-js 或旧版 lessc 可能降级为警告而非中断
• Webpack 中 less-loader 若未配置 throwOnImportError: true，错误会被忽略
• VS Code 的 Easy LESS 插件已停更，常假死却不报错，实际根本没触发编译
• Vue 单文件组件里 <style lang="less"></style> 是独立编译上下文，不自动继承全局变量，必须显式 @import 或用 style-resources-loader 注入

循环引用会让编译器卡死或爆内存，而非报变量未定义

当 A.less → B.less → A.less 形成循环，Less 不会报 variable is undefined，而是陷入无限文本拼接，最终触发 FATAL ERROR: Allocation failed - JavaScript heap out of memory。

• 循环常藏在三层以上 @import 链中，@import (reference) 会让问题更隐蔽
• 临时删掉所有 reference 和 inline 导入，让循环立刻暴露为变量未定义错误
• 真正解耦方式是抽离原子级 tokens.less，禁止它再 @import 其他文件，作为整个依赖树的唯一根

最易被忽略的一点：你看到的“CSS 报错”，其实是编译失败的残骸。修复的关键永远在 Less 源码组织——变量在哪定义、何时导入、谁覆盖谁，而不是在 CSS 输出里找补丁。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！