@import必然重复打包因其是无状态文本插入，每次调用均全量展开；@use通过模块化单例加载实现去重，配合统一入口文件和as*导出可根治重复问题。
@import必然导致重复打包，因为它根本不是模块加载，而是无脑文本插入——每次出现就原样复制全部内容，不判断是否已存在。
为什么@import会把同一个变量生成20份CSS
@import没有“已加载”概念。哪怕_variables.scss被15个组件文件各自@import一次，Dart Sass 就会把它展开15次，里面的$color-primary、@mixin flex-center()、甚至.reset { margin: 0 }都会原样塞进每个编译单元。
- 最终 CSS 文件里会出现15份一模一样的
.reset { margin: 0 }规则 - 修改
$spacing-sm后，部分组件样式不更新——因为它们用的是不同副本里的旧值 - 打包体积暴涨（比如
dist/style.css从300KB涨到2MB+），且无法靠Tree Shaking清理
@use如何真正避免重复输出
@use是模块系统：同一路径只执行一次，后续引用全走缓存。它不拼接文本，而是在编译期建立模块实例，变量/mixin/CSS规则都只生成一份中间表示。
- 在
src/styles/index.scss中写@use 'variables' as vars，所有组件再@use '@/styles/index.scss' as *，就能共享同一份解析结果 - 即使
_button.scss和_card.scss都@use 'mixins/flex'，Sass 也只编译flex.scss一次 - 验证方法：编译后搜索
color: #333，应只出现1次；若散落多处，说明仍有@import残留
Vite/Webpack里最容易漏掉的重复源头
你以为删了自己代码里的@import就安全了？错。这些地方照样触发legacy模式：
立即学习“前端免费学习笔记（深入）”；
-
vite.config.ts的preprocessorOptions.scss.additionalData里写了@import——哪怕只有一行，整个项目降级 -
node_modules里未升级的第三方库（如bootstrap@5.2）仍用@import，你的@use直接失效 - 某个组件文件里偷偷写了
@import 'reset'，会导致它所在整个依赖链（包括父@use文件）失去命名空间
真正难的不是语法替换，而是确保整个依赖图里没有一处@import——它像病毒，只要一个节点感染，整条链就退化。
