@import (reference) 不减少体积是因为它仅抑制当前文件CSS输出，不阻止被引用文件中非reference导入的样式展开，且不影响mixin调用后的编译。
@import (reference) 能让 Less 文件只提供变量、mixin、extend 等定义，不输出任何 CSS —— 但它不是“自动去重”开关，用错位置或理解偏差反而会放大冗余。
为什么 @import (reference) 没减少体积？
常见误用是把它当成“安全导入”，以为加了 (reference) 就万事大吉。实际它只抑制当前文件的 CSS 输出，不阻止被引用文件中其他非 (reference) 导入所触发的样式展开。
- 如果
_mixins.less里用了@import "base-styles.less"（没加(reference)），那即使你用@import (reference) "_mixins.less"，base-styles.less的 CSS 仍会照常输出 -
@import (reference)不影响 mixin 展开逻辑：只要某个 mixin 被调用，它内部所有声明（包括嵌套、计算、条件）都会编译进最终 CSS - 多个文件都
@import (reference) "_variables.less"是安全的，但若其中某处漏写(reference)，整条链就“破防”
@import (reference) 的正确使用场景
它只在「纯定义 + 显式调用」路径下才真正起效。典型适用点：
- 全局变量和函数集中文件（如
_colors.less、_functions.less），确保只被引用，不产生样式块 - 基础 mixin 库（如
.clearfix()、.sr-only()），避免未调用时也输出空规则 - 跨组件共享的 extend 目标类（如
.visually-hidden:extend(.sr-only all)），防止目标类本身被重复引入
容易被忽略的副作用
@import (reference) 后，被引用文件里的 @media、@keyframes、@font-face 也不会输出 —— 这常被遗忘，导致图标字体或动画失效。
- 若需保留
@keyframes，不能全用(reference)，得拆出独立文件单独导入 -
@import (reference)中的&嵌套规则仍会参与编译，只是不生成选择器；但若该文件里有顶层.foo { ... }，它会被完全跳过 - Webpack +
less-loader下，javascriptEnabled: true时，@import (reference)内的 JS 表达式仍会执行，但结果不参与 CSS 输出——这点调试时很难察觉
真正控制冗余的，从来不是单个 @import 模式，而是整个引用拓扑是否收敛：谁定义、谁消费、谁输出。一旦出现“某处调用了 mixin，但没人 import 它的定义文件”，编译就会失败；而“多处 import 了同一份非 reference 文件”，冗余就已注定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
