这是变量引用发生在定义之前或未被导入/声明所致，因Less按顺序解析且无变量提升机制，需确保变量文件@import在使用前、路径正确、拼写大小写一致，并用--verbose定位具体错误位置。
Less编译报 Variable @xxx is undefined 是什么情况
这不是语法错误，而是变量引用发生在定义之前，或变量根本没被导入/声明。Less 是顺序解析的，@import 和变量声明都按源码出现顺序执行，不存在“提升”（hoisting）机制。
检查变量是否在使用前被正确 @import
常见错误是把变量文件放在了引用它的样式文件之后，比如：
// main.less
.btn { color: @primary-color; }
@import "components/button.less"; // ❌ 变量还没加载，这里就用了
@import "variables.less"; // ❌ 这行太靠后
应确保变量定义文件在最顶部，且路径可访问：
-
@import "variables.less";必须出现在所有用到@primary-color等变量的代码之前 - 路径是相对于当前文件（不是入口文件）的，如果
variables.less在上层目录，要写@import "../variables.less"; - Less 不支持通配符导入（如
@import "vars/*.less"），必须显式列出
确认变量名拼写、作用域和大小写是否一致
Less 变量区分大小写，且没有全局隐式作用域 —— 每个 @import 是独立作用域，除非显式 @import (reference) 或嵌套在 mixin 中。
-
@PrimaryColor≠@primary-color≠@primaryColor - 在
.mixin() { @color: red; }里定义的@color，外部无法访问 - 如果用
@import (reference) "mixins.less";，它不会输出 CSS，也不会暴露变量 —— 只有普通@import才会注入变量
用 lessc --verbose 定位具体出错位置
默认错误只提示 “variable undefined”，不带行号或文件名。加 --verbose 可看到完整解析链：
lessc --verbose main.less > out.css // 输出类似： // Parsing variables.less // Parsing components/button.less // Error: variable @text-size is undefined in button.less:12:15
配合编辑器跳转，快速定位到那行 @text-size 的使用点，再反查 variables.less 是否真有这行定义、有没有被注释掉、或者被包裹在条件 mixin 里导致未执行。
真正麻烦的是跨文件覆盖：比如两个 @import 都定义了 @border-radius，但后导入的没生效，前面的却已被引用 —— 这时错误未必立刻出现，但结果不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
