less编译失败时会原样输出@primary-color等未定义变量，而非生成合法css；根本原因是变量未定义导致解析中止，常见于@import顺序错误、路径失效或构建工具吞错。
Less编译结果里出现@primary-color这类占位符？
这不是“编译结果不同”，而是根本没编译成功。你看到的@primary-color是 Less 解析器在找不到变量定义时提前中止、原样输出的源码片段，不是合法 CSS。
常见触发场景：
-
@import "./variables.less";写在使用变量的规则之后——Less 是顺序执行，不支持“先用后定义” - Vue 单文件组件的
<style lang="less"></style>里直接写@primary-color，但没通过@import显式引入变量文件——每个<style></style>是独立编译上下文 - 路径拼错或文件为空，导致
@import静默失败，后续变量不可见 - Webpack 中
less-loader配置了javascriptEnabled: true但没设throwOnImportError: true，错误被吞掉
编译后属性顺序和手写CSS不一致？
Less 不保证最终 CSS 属性顺序与源码书写顺序完全一致，因为编译过程会做展开和合并，而 CSS 本身不依赖属性顺序（除个别如!important、display与flex相关属性外）。
真正影响顺序的只有两点：
- 变量赋值语句不输出 CSS，所以
@color: red;不会占用行号或影响后续顺序 -
.mixin()展开时，内部属性严格按其定义顺序插入——比如.flex-center()里写了display: flex;再写justify-content: center;，调用处就一定是这个顺序 - 嵌套中重复声明同名变量会覆盖前值，比如
&__header { @gap: 8px; margin-bottom: @gap; }和&__body { @gap: 16px; padding-top: @gap; }，实际两个都取16px
CSSLint 或浏览器开发者工具里看到的顺序“乱”了？
CSSLint 对 Less 编译期逻辑完全无感知，它只检查最终输出的 CSS 字符串。所谓“顺序混乱”，大概率是以下原因：
-
@import "reset.less";写在button.less后面，但编译后 reset 规则出现在.btn块之后——这是@import顺序决定的，不是 CSS 层问题 - 用了
@import (reference)引入 mixin，但mixins.less没被提前@import，编译失败，压根没生成 CSS - 多个组件文件各自
@import相同变量，但路径不统一（如../vars.lessvs./vars.less），导致部分文件变量未生效，编译中断
为什么有些 CSS 新特性（如:has()）在 Less 里写不了？
Less 是预处理器，不是运行时引擎。它只处理语法层面的变量、嵌套、mixin 展开等，不解析或校验 CSS 标准新特性是否被浏览器支持。
你可以直接在 Less 里写：.card:has(> .header) { padding-top: 20px; }，只要语法合法，Less 就原样透出到 CSS；但它不会帮你降级、加前缀或报错。
真正要控制兼容性，得靠 PostCSS 插件（如autoprefixer、postcss-preset-env），而不是 Less 本身。
变量作用域、@import顺序、mixin 展开时机——这些才是 Less 编译行为的核心约束点，不是“功能差异”，而是“执行模型差异”。忽略它们，就容易把编译失败当成“结果不同”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
