@import (reference) 仅对 less 文件有效且需满足三条件：导入 .less 文件、样式在顶层、无非 reference 导入依赖；对 css 文件无效，会忽略 (reference) 并全量输出。
@import (reference) 不是“按需引入 CSS”的通用解法，它只对 Less 文件有效，且仅在你明确调用其中的 mixin 或 :extend() 时才输出样式——直接把它当成 CSS 的懒加载开关，一定会踩坑。
为什么 @import (reference) 对普通 CSS 文件无效
Less 的 @import (reference) 机制只作用于被识别为 Less 的文件（即扩展名为 .less，或显式加了 (less) 选项）。如果你写成：
@import (reference) "animate.css";
Less 编译器会把它当普通 CSS 导入（等价于 @import (css)），(reference) 关键字被忽略，整个文件照常输出到最终 CSS 中。
常见错误现象：以为加了 (reference) 就能“按需加载动画”，结果打包体积没变，还丢了 @keyframes 定义——因为 (reference) 对 CSS 文件压根不生效。
- 想导入 CSS 动画库，必须用
@import (inline) "animate.css"或构建时动态加载 - 若要真正按需，得用其 Less 版本（如
animate.less），再配合(reference)+ 显式调用.animate__bounce()这类 mixin - 第三方 CSS 库若无 Less 源码，
(reference)完全绕不过去
@import (reference) 的真实生效条件
它只在以下三个条件同时满足时，才能抑制 CSS 输出：
- 导入的是
.less文件（或加了(less)） - 该文件中所有样式规则都在顶层（即没被
.mixin()或:extend()包裹） - 你没有在其他地方用
@import（非reference）导入过它的依赖链
例如：_variables.less 里只有 @primary: #007bff;，_mixins.less 里定义了 .btn() { ... }，且它自己没 @import "reset.css" ——这时 @import (reference) "_mixins.less" 才安全。一旦 _mixins.less 里有 @import "base.css"，那 base.css 仍会完整输出。
容易被忽略的副作用：@keyframes 和 @font-face 也被吞了
@import (reference) 会跳过被引用文件中所有顶层规则，包括 @keyframes、@font-face、@media。这不是 bug，是设计行为。
典型问题：图标字体突然不显示、自定义动画失效，查了半天发现是 _animations.less 被 (reference) 导入，而里面定义的 @keyframes spin 被整段跳过。
- 解决方案：把
@keyframes单独拆进_keyframes.less，用普通@import导入 - 或者改用
@import (less, reference)+ 把动画封装成 mixin：.animate-spin() { animation: spin 1s; } - 别指望
(reference)能智能识别“哪些规则该留、哪些该删”
真正决定体积的，从来不是某一行 @import 加不加 (reference)，而是整个依赖链里有没有重复的 @import "xxx.less"、有没有未调用却输出的 mixin、以及是否把 @keyframes 这类关键规则误塞进了 reference 文件里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
