Less中@import默认静态全量内联，导致CSS体积膨胀；需用@import (reference)导入混入并显式调用才能按需输出，避免未使用样式进入打包结果。
Less文件里用@import引入其他模块，为什么打包后所有样式都进来了？
因为默认的@import是编译期静态加载，Less编译器会把所有@import的文件内容直接内联进主文件，不管实际是否用到。这导致最终CSS体积膨胀，尤其在组件库或主题切换场景下特别明显。
- 开发时用
@import写起来方便，但没做任何按需逻辑 - Webpack/Vite等构建工具对
.less文件的处理，默认就是全量编译+提取，不识别“条件导入” -
@import (reference)可以避免输出样式，但不会阻止变量/混入被解析——它只是“只导入不输出”，仍会参与编译上下文
怎样让某个Less模块只在用到时才生效？
靠@import (reference) + 混入（.mixin-name()）组合使用。核心思路是：把样式逻辑封装成混入，用(reference)导入，再在需要的地方显式调用。
-
@import (reference) "./button.less";—— 导入但不生成CSS -
.button-primary { .btn-base(); .btn-primary(); }—— 只有这里写了，对应样式才输出 - 不能写
.btn-primary()在@import之后就空着，那样等于没调用，样式不会出现 - 注意混入名冲突：
button.less里定义.btn()，其他文件也定义同名，会被覆盖，建议加命名空间前缀如.u-btn()
Webpack中配置Less按需，关键要改哪几处？
不是靠Loader配置“开启按需”，而是靠Less语法本身控制输出路径，Loader只需保证支持(reference)和混入即可。现代less-loader默认支持，但要注意版本：
-
less-loaderv7+ 支持@import (reference)和嵌套混入，v6及以下可能报错Unknown import option 'reference' - 确保
less依赖版本 >= 3.10.0（less-loaderv7要求less>= 3.9.0） - 不要在
less-loader选项里加additionalData全局注入，那会让所有文件都隐式依赖，破坏按需效果 - Vite用户注意：
vite-plugin-style-import这类插件对Less支持有限，它主要针对ant-design-vue等JSX组件的CSS按需，不接管Less混入调用逻辑
为什么用了(reference)还是打包出一堆没用的CSS？
大概率是混入被间接调用了，或者用了@import但没加(reference)，又或者构建工具做了CSS提取合并（比如mini-css-extract-plugin把所有style标签合并成一个main.css），造成“看起来全量”。真正的问题往往藏在调用链里：
- 检查是否有父级混入里调用了子混入，比如
.card() { .shadow(); .border(); }，只要.card()被调用，.shadow和.border就一定会输出 - 搜索项目里有没有
@import "./xxx.less"漏掉了(reference)——少一个括号，整份文件就全量输出 - 启用
less的math: always或javascriptEnabled: true可能触发非预期计算，间接激活混入（极少见，但调试时可先关掉） - Tree-shaking对CSS无效，别指望Webpack自动删掉未调用的混入；它只管JS，Less混入的“死代码”必须靠人工梳理调用关系
按需不是开关，是写法约定。混入要不要输出，取决于你有没有那一行调用，而不是文件存不存在、路径写得对不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
