默认@import会导致css体积翻倍，因其采用“内容展开式”合并，多个入口重复导入同一文件（如variables.less）会使变量、mixin、注释等被无差别复制多遍；而@import (reference)仅导入符号（变量/mixin可访问），跳过所有选择器、@keyframes、@font-face等样式输出，但需注意后者仍会重复输出，须单独抽离并普通导入。
为什么默认@import会让CSS体积翻倍
Less的@import默认是“内容展开式”合并，不是CSS原生的链接加载。你写@import "mixins.less";，它就把整个文件内容原样塞进当前编译上下文——哪怕里面只有@color-primary: #007bff;和几个.btn()混入，也会被无差别复制进来。更糟的是，如果多个入口（critical.less、dashboard.less、profile.less）都这么引入同一份variables.less，那变量定义、混入体、甚至注释和空行，就会在最终CSS里重复出现三遍。
@import (reference)到底屏蔽了什么
@import (reference)不是“不导入”，而是“只导入符号，不输出样式”。它让Less把目标文件当纯声明容器处理：变量可读、混入可调、函数可执行，但所有选择器、伪类、媒体查询、@keyframes、@font-face全被跳过，一行都不进输出。
常见误用点：
- 在
_variables.less里写了@font-face { src: url(...); }→ 即使加了(reference)，该规则仍会被每个引用它的入口重复输出 - 混入里没加守卫（guard），比如
.icon() { background: url(x.svg); }→ 只要被调用就出样式，不调用才真正“按需” - 路径写错，比如
@import (reference) "../mixins/grid.less";和@import (reference) "~styles/mixins/grid.less";被当成两个文件，(once)也救不了
怎样验证(reference)真的起效了
别只信编译结果体积变小——得看它有没有把不该出的东西拦住。打开Chrome DevTools → Coverage → 刷新页面 → 点击style标签，观察首屏关键CSS里是否还存在非首屏组件的选择器（比如.modal-overlay、.chart-tooltip）、动画帧（@keyframes spin）、或深嵌套的article section header h1之类。
实操建议：
- 给首屏专用入口（如
critical.less）开头强制加@import (reference) "variables.less"; @import (reference) "mixins.less";，后面只手写或显式调用.btn-sm()、.text-truncate()等真正用到的规则 - 用
lessc --verbose编译时加日志，检查是否报Warning: Cannot resolve import——这说明(reference)路径对了，但后续没调用混入，等于白引 - 配合
postcss-discard-unused或PurgeCSS做二次过滤，但注意：它删的是“未匹配DOM的选择器”，不是“未调用的混入”，两者逻辑不同
容易被忽略的副作用：@keyframes和@font-face必须单独抽离
@import (reference)对@keyframes和@font-face无效——它们属于“全局作用域声明”，一旦出现在被(reference)引入的文件里，就会被每个引用者各输出一份。一个base/fonts.less含3个@font-face，被5个入口引用，就生成15份字体声明。
正确做法：
- 新建
base/global-rules.less，只放@keyframes和@font-face，且**不加(reference)** - 主入口
app.less用普通@import "base/global-rules.less";引入一次 - 其他所有模块（包括
critical.less）改用@import (reference)，确保不带入全局规则
这个边界不划清，再怎么用(reference)也压不住体积。Less本身不运行，但编译时的“符号可见性”和“输出时机”控制，才是体积问题的开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
