@import (reference)不生效是因为它仅加载变量和mixin而不输出css，必须显式调用mixin（如.btn()）或引用变量（如@primary-color），不能直接使用被导入文件中的类选择器（如.btn），且依赖链缺失或调用语法错误也会导致失败。
为什么@import (reference)不生效？
直接写@import (reference) "bootstrap.less"通常没效果，因为 Less 的 reference 模式只抑制输出，不自动注入变量或 mixin——它把整个文件当“背景知识”处理，你仍需显式调用其中的 mixin 或使用其变量。
常见错误是以为加了(reference)就能直接用.btn这类类名，其实不会生成任何 CSS，也不会让.btn可用，除非你在当前文件里主动调用.btn()（如果它是个 mixin）或引用@btn-padding（如果它已定义为变量）。
-
@import (reference)后无法直接使用被导入文件中定义的 CSS 类选择器（如.alert），它们根本不会出现在编译结果里 - 变量和 mixin 会被加载进作用域，但变量若在
@import前已被定义，后续同名变量不会覆盖（Less 变量是“首次定义优先”） - 如果被导入文件本身依赖其他文件（比如 Bootstrap 依赖
variables.less和mixins.less），只@import (reference)主入口可能因依赖缺失导致 mixin 调用失败
@import (reference)适合什么场景？
它不是“悄悄引入样式”，而是“悄悄引入逻辑”——典型用于构建可复用的 UI 组件库或主题系统，你自己写组件时按需调用，而不是把整套 CSS 倒进去。
- 封装一套按钮变体：
.btn-primary()、.btn-outline()等作为 mixin 导出，主样式文件用@import (reference)引入，再根据业务需要展开调用 - 统一颜色/间距变量管理：把
@primary-color、@spacing-xs定义在theme.less中，用@import (reference)加载，后续所有组件都基于这些变量计算，避免硬编码 - 避免重复编译：多个组件文件都
@import (reference) "mixins.less"，比每个都@import "mixins.less"更轻量，不会重复输出 mixin 展开后的 CSS
如何正确调用 reference 导入的 mixin？
必须显式调用，且调用语法要匹配原定义。比如 Bootstrap 4 的.make-col()是带参数的 mixin，不能只写.make-col；而有些库用.sr-only()这种无参 mixin，少括号会报错。
@import (reference) "bootstrap/mixins/grid-framework.less";
.my-grid-item {
// ✅ 正确：传入参数，调用成功
.make-col(6);
// ❌ 错误：漏掉括号，Less 会当作选择器尝试匹配，报 Unknown error
// .make-col;
// ❌ 错误：参数类型不符（比如传字符串而非数字），编译失败
// .make-col("six");
}
- 调用前建议先查源文件确认 mixin 签名：
.mixin-name(@arg1: default, @arg2...) - 如果 mixin 内部用了
&嵌套或@{...}插值，确保上下文变量存在，否则可能生成无效 CSS - 开启 Less 编译器的
--strict-math=on选项有助于提前捕获数值运算错误（比如@grid-columns / 2算不出结果）
和@import (less)、普通@import的区别在哪？
三者行为差异直接影响打包体积和维护成本：
- 普通
@import "file.less"：完全展开，所有 CSS 输出 + 所有变量/mixin 加载，适合基础样式层 -
@import (less) "file.less"：强制按 Less 解析（即使扩展名是.css），但依然输出全部 CSS，主要用于兼容旧命名或 CDN 引入 -
@import (reference)：零 CSS 输出，仅加载变量/mixin 到当前作用域，适合逻辑复用，但要求你主动消费
一个容易被忽略的细节：@import (reference)对@value: 1px这类变量是“可见但不可重赋值”的——你在当前文件写@value: 2px不会覆盖它，Less 仍用原始值；只有未定义过的变量才能被新声明。
