变量必须集中定义在 variables.less 中并显式导入，否则无法生效；@import 必须位于文件首行且带 .less 后缀；推荐用 rem 单位定义字体变量，禁用 calc() 或函数初始化。
变量定义必须集中放在 variables.less 里
Less 没有“自动全局变量”机制，@font-family-base 或 @font-size-lg 这类变量不会自己生效。你得手动建一个 variables.less 文件，把所有字体相关值写进去，比如：
@font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; @font-family-serif: Georgia, serif; @font-size-xs: 0.75rem; @font-size-sm: 0.875rem; @font-size-base: 1rem; @font-size-lg: 1.125rem; @line-height-base: 1.5; @font-weight-normal: 400; @font-weight-medium: 500; @font-weight-bold: 700;
关键点是：这些变量只在被 @import 的上下文中可见；不导入，就用不了。
入口文件顶部 @import "variables.less" 是硬性要求
每个要用字体变量的 .less 文件，都得在第一行显式导入，例如：
@import "variables.less";
<p>.title {
font-family: @font-family-serif;
font-size: @font-size-lg;
font-weight: @font-weight-bold;
line-height: @line-height-base;
}常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 漏写扩展名，写成
@import "variables"→ Webpack + less-loader 默认不解析无后缀导入，报Cannot resolve import - 把
@import放在规则后面 → Less 作用域从上到下，变量必须先声明再使用 - 在 Vue 单文件组件的
<style lang="less"></style>里单独导入 → 每个组件都重复解析一遍，热更新易失效，编译变慢
Webpack 中用 additionalData 实现真正“注入”
如果你希望所有 .less 文件（包括 Vue SFC）都默认拥有字体变量，就得靠 less-loader 的 additionalData 配置，在每次编译前自动拼接导入语句：
less-loader: {
options: {
additionalData: `@import "@/styles/variables.less";`
}
}注意三点：
- 路径中的
@/styles/variables.less必须和 Webpack 的resolve.alias对齐，否则报错 - 如果用了 CSS Modules，变量仍可用，但不能出现在
:global{}外的选择器内部（Less 语法限制） - 修改
variables.less后，HMR 不会触发重编译 → 必须手动刷新浏览器，这是当前技术栈的固有限制
别用 calc() 或函数调用初始化字体变量
Less 变量是编译时静态值，不支持运行时计算。下面这些写法都会直接报错：
@font-size-base: calc(1rem * 1.1); // ❌ ParseError @font-size-responsive: unit(16px / 16, rem); // ❌ 不支持函数调用初始化
正确做法是用纯数值或单位明确的字面量：
- 推荐用
rem单位（如@font-size-base: 1rem），方便配合根元素动态缩放 - 字号比例差异大的场景（标题 vs 注释），别用
@font-size-base * 1.2推导，应单独定义@font-size-h1: 2.5rem等语义化变量 - 避免在变量里塞
fade()、contrast()等函数 —— 它们只能用在样式声明中，不能当变量值
字体管理真正的复杂点不在定义，而在“谁在什么时候能访问到它”——作用域控制比语法本身更关键。漏掉一次 @import 或配错 additionalData 路径，整个字体系统就断联了。
