遇到“Variable @xxx is undefined”错误时，应在使用前显式声明默认值，如@brand-color: @brand-color or #007bff;或提前在import前定义fallback变量；isdefined()仅用于mixin guard中控制执行，不可用于属性赋值；复杂场景需构建层预处理注入默认变量。
Less 编译时遇到 Variable @xxx is undefined 怎么办
Less 默认遇到未定义变量会直接报错中断编译，没法“兜底”或降级处理。这不是语法缺陷，而是设计使然——Less 不支持运行时变量存在性检查（比如没有 is-defined(@var) 这类函数），所以想“捕获”它，本质是绕过检查时机，而非真正 try/catch。
用 @variable: default-value 提前声明默认值
最直接、最可靠的方式是在变量首次使用前，显式赋予一个 fallback 值。Less 的变量赋值是“最后一次生效”，但前提是该变量名在作用域内已被声明过（哪怕值为空）。
常见错误写法：@color-primary: @brand-color; —— 如果 @brand-color 未定义，这里就炸了。
正确做法：
- 在引入第三方 Less 文件前，先声明所有可能被依赖的变量（即使只是占位）：
@brand-color: #007bff;
- 若变量来自外部配置（如主题包），把 fallback 写在 import 之后、实际使用之前：
@brand-color: @brand-color or #007bff;
（注意：or是 Less 3.5+ 支持的逻辑操作符，仅对 falsy 值生效，undefined被视为 falsy） - 避免在
@import语句中动态拼接变量名（如@import "@{theme}/vars.less";），因为@theme未定义会直接让 import 失败
用 .mixin() when (isdefined(@var)) 做条件混入
Less 提供了 isdefined() 函数，但它只能用于 when guard 中，且仅在 mixin 定义/调用阶段起作用，不能用于普通属性赋值。
适用场景：你有一组样式只在某变量存在时才启用。
示例：
.button {
background: #ccc;
.theme-styles() when (isdefined(@brand-color)) {
background: @brand-color;
}
.theme-styles();
}
注意点：
-
isdefined()对@undefined-var返回true？不，它返回false；但对@defined-var: null;也返回true（因为变量已声明） - guard 不会阻止编译，只控制 mixin 是否执行，所以不会中断流程
- 不能用在
@color: isdefined(@x) and @x or #000;这种表达式里——isdefined()不是三元运算符的一部分
构建层预处理：用 PostCSS 或脚本注入 fallback 变量
如果项目已接入 Webpack/Vite，且变量来源不可控（如用户上传的主题 JSON），靠 Less 自身很难兜底。这时应在编译前一步介入：
- 读取主题配置文件，生成一个
variables.fallback.less，内容为所有可能缺失变量的默认值声明 - 确保它在所有业务 Less 文件之前被
@import，顺序很重要：@import "variables.fallback.less"; @import "theme/user-vars.less"; @import "components/button.less";
- Webpack 用户可用
less-vars-webpack-plugin动态注入，但注意它只处理顶层变量，对嵌套@import中的变量无效
真正难处理的是跨文件、多层级的变量依赖链，比如 A.less → B.less → C.less → @missing-var。这时候光靠 Less 语法无解，必须靠构建流程统一管理变量生命周期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
