less未编译成功导致@primary-color等变量原样输出，因变量未定义、import顺序错误、空文件、路径失效、作用域污染或语法错误（如缺分号、中文路径）引发解析中断，而工具常静默忽略报错。
这不是 CSS 编译的问题，而是 Less 根本没编译成功——你看到的 @primary-color 这类占位符，是解析器遇到未定义变量时直接中止、原样输出的源码片段，不是合法 CSS。
为什么报错却没中断构建？
Less 编译器会抛出 NameError: variable @primary-color is undefined，但很多工具选择静默吞掉它：
-
lessc --no-js或旧版命令行工具默认不阻断流程 -
webpack中less-loader若没配throwOnImportError: true，错误只打日志不终止 - VS Code 的 Easy LESS 插件常忽略错误，直接把原始文本写进 .css 文件
- Vue CLI 项目里
<style lang="less"></style>是独立编译上下文，不继承全局变量
import 顺序写错是最常见原因
Less 的 @import 是线性拼接，没有“预加载”或“作用域提升”：
- 错误写法：
.btn { color: @primary-color; }写在@import "./variables.less";前 → 变量不可见 - 正确做法：所有变量定义必须出现在任何引用之前，统一入口（如
main.less）最先@import "variables.less" - 空的 .less 文件（路径存在但内容为空）会打断 import 链，后续文件全失效
- 路径别名（如
~antd）未被构建工具识别时，@import "~antd/dist/antd.less"实际找不到文件
变量作用域和命名陷阱
Less 变量没有模块化隔离，覆盖是静默发生的：
-
.button { @primary-color: red; }不会局部生效，也不会报错，但该声明无效且污染后续逻辑 - 泛义名如
@primary-color在多个文件中重复定义，后定义者会覆盖前定义者，无警告 - 声明漏分号：
@spacing-xs: 4px（缺;）→ 整行被跳过，后续变量全失效 -
@import (reference)不解决变量冲突，它只控制样式输出，变量仍注入当前作用域
SCSS 用户容易误迁思维
SCSS 的 @use 有作用域隔离，Less 没有。不要指望 @import 能自动合并或去重：
- 循环引用（A → B → A）不会报语法错误，而是卡死或爆内存
- 相对路径起点是当前文件，不是项目根目录：
src/scss/pipe.scss里写@import "../pub/vars"，找的是src/pub/vars.scss - 中文路径、零宽空格（U+200B）、BOM 头会让 Less 词法分析器直接崩溃，报
ParseError: Unrecognised input
真正要盯住的不是“变量在哪定义”，而是“它在哪个时刻、哪个上下文里被首次读取”——Less 没有运行时，只有编译时的一次性文本拼接，错一步，整条链就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
