@import必然重复打包因其是无状态文本插入机制，每次调用均全量展开；@use通过模块化单例加载实现去重，配合统一入口文件和as*导出可根治重复问题。
@import 导致重复打包不是配置问题，而是机制缺陷；必须迁移到 @use 才能根治。
为什么 @import 必然引发重复样式
@import 是“文本插入”行为：每次遇到就原样展开内容，不判断是否已加载。哪怕同一个 _variables.scss 被 20 个组件文件 @import，它就会被编译 20 次，变量、mixin、CSS 声明全量复制进每个输出文件。
常见错误现象包括：
- 打包后 CSS 体积异常膨胀（比如
dist/style.css达到 2MB+） - 控制台出现
Conflicting order. Following module has been added报错 - 修改一个变量后，部分组件样式未更新（因缓存了不同副本）
这不是 Webpack 或 Vite 的 bug，是 @import 语义本身决定的——它没有模块身份、无作用域、无去重逻辑。
@use 如何真正解决重复问题
@use 是模块导入：每个文件只加载一次，后续引用全部复用同一份编译结果。Sass 编译器会自动识别相同路径的 @use 并合并执行。
实操建议：
- 把所有全局变量、函数、mixin 收口到一个入口文件，例如
src/styles/index.scss - 在该文件中统一
@use其他模块：@use 'variables' as vars、@use 'mixins' - 在
vite.config.ts的preprocessorOptions.scss.additionalData中，只注入这一个@use语句：@use "@/styles/index.scss" as * - 注意
as *表示将命名空间内所有成员（变量、mixin、函数）直接提升到全局，避免写vars.$color-primary这类前缀（但仅限这个入口文件）
这样，所有组件 SCSS 文件都共享同一份解析结果，变量不会重复声明，CSS 规则也不会重复生成。
Vite / Webpack 中容易踩的坑
即使改用 @use，仍可能因配置不当导致隐性重复：
- 在
main.ts或App.vue中又import '@/styles/index.scss'—— 这会触发第二轮 Sass 编译，和additionalData注入的内容冲突 - 在
additionalData中写@import（哪怕只有一处）—— Dart Sass 3.0.0+ 会报DeprecationWarning，且该行仍按旧机制展开 - 多个
@use指向同一文件但路径不一致（如@use '@/styles/variables'vs@use 'src/styles/variables'）—— Sass 视为两个不同模块，重复加载 - 使用
@forward时未加as *，又在组件里单独@use被转发的子模块 —— 破坏单例语义
验证是否成功：编译后检查 .css 文件，搜索某个全局变量生成的 CSS（如 color: #333），应只出现一次，而非散落在各处。
过渡期兼容处理的关键点
老项目不能一夜重写，但也不能放任 @import 继续污染构建：
- 优先改造高频引入的文件（如
variables.scss、mixins.scss），其他低频文件可暂缓 - 不要混用
@import和@use引入同一模块 —— Sass 不保证行为一致，极易触发Undefined variable - 用官方迁移工具
sass-migrator module --migrate-deps file.scss自动转换，但需人工核对@forward的show/hide列表是否合理 - 若依赖第三方 SCSS 库（如 Bootstrap）尚未支持
@use，暂时用@use "bootstrap" with ( $enable-important: false )方式包裹，避免其内部@import泛滥
最易被忽略的是：模块路径必须**完全一致**才能被去重 —— 相对路径、别名路径、绝对路径在 Sass 看来是三个不同模块，哪怕它们最终指向同一文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
