@import导致css重复打包是因为less的静态展开机制：每次导入都全量复制内容，webpack和less均不自动去重，同一文件被多次导入即生成多份样式；@import (reference)则仅导入变量和mixin，不输出css。
为什么@import会导致CSS重复打包
因为Less的@import是静态展开机制，不是模块引用——每次出现就原样把目标文件内容复制进当前编译上下文，Webpack不会去重、Less编译器也不会合并，同一份antd.less被5个组件文件各@import一次，最终CSS里就有5份.ant-btn规则。
@import和@import (reference)的根本区别
前者是“全量内联”，后者是“只加载不输出”。关键不在语法多一个括号，而在编译行为是否触发CSS生成：
-
@import "antd/dist/antd.less";→ 把整个Ant Design样式树完整展开，不管组件用了Button还是Table，全塞进去 -
@import (reference) "mixins.less";→ 只让.btn-base()这类mixin和@primary-color变量可用，但不会生成任何.ant-*选择器 - 漏掉
(reference)或写成@import "mixins.less"，就等于悄悄开了5个样式副本通道
哪些@import写法必然引发重复
以下模式在构建时几乎一定导致体积翻倍甚至指数增长：
- 在多个
*.module.less中各自@import '~antd/dist/antd.less' - 用相对路径反复引入同一份
variables.less，比如@import "../theme/variables.less"和@import "../../shared/variables.less"（路径不同，Less视为两个文件） - 在
fonts/variables.less里直接写@font-face，再被10个组件导入 → 字体声明重复10次，浏览器可能多次发起WOFF请求 -
@import "components/*.less"—— 多数Less版本根本不支持通配符，且会破坏导入顺序，间接导致样式覆盖错乱
怎么验证你的CSS有没有被@import重复污染
别靠肉眼扫，用构建后产物反查最准：
- 搜索最终CSS文件里的
.ant-btn，看是否出现几十次，且带不同嵌套前缀（说明来自不同编译入口） - 检查
npm run build后的dist/css目录下是否有多个@font-face块，尤其同字体名出现多次 - 用
grep -n "html {" dist/main.css确认@import (css)是否生效——如果报错或没匹配到，说明normalize.css被当Less源码解析了 - 打开DevTools的Coverage面板，加载页面后看
.ant-*类的实际使用率，低于30%基本可判定存在大量冗余导入
真正难处理的不是语法写错，而是@import路径看似合理、编译不报错、但实际在多个作用域里静默展开了同一套样式——这种问题必须从入口收口开始切，而不是在组件层打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
