SCSS中@mixin重名冲突必须用@use模块系统解决，它通过命名空间隔离作用域、强制显式调用（如f.flex-center()）并废弃@import；@import会全局注入同名mixin导致静默覆盖，而@use确保每个mixin仅在显式调用时进入命名空间且天然带前缀。
SCSS 中重复定义同名 @mixin 不会报错，但后加载的会静默覆盖前一个——你改了 flex-center，结果按钮组件还在用旧逻辑，这种问题很难定位。
为什么 @import 是重复 mixin 的根源
@import 是“内容注入”，每次遇到就展开全部内容，不区分来源。两个文件都 @import "mixins/flex.scss"，里面都有 @mixin flex-center()，第二个会直接覆盖第一个，且编译器不提示。
- 即使路径相同，
@import也不去重，每个导入都执行一遍 - 变量、函数、mixin 全部平铺进全局作用域，没有命名空间保护
- Dart Sass 已废弃
@import，2026 年起新项目必须迁移到@use
用 @use + as 显式控制命名空间
把 mixin 拆到独立文件（如 _flex.scss、_layout.scss），再用 @use 导入并指定别名，就能强制隔离。
-
@use "flex" as f;→ 调用写成f.flex-center() -
@use "layout" as l;→ 同样调用，不会和 <code>f.container()冲突 - 同一路径多次
@use，Sass 只执行一次，天然防重复 - 如果两个模块都导出
container，又不想加前缀，必须用as *时显式重命名：@use "flex" as f; @use "layout" as l;，不能混用as *
在 Vite 中全局暴露 mixin 的安全写法
想让所有组件直接写 @include flex-center() 而不加前缀？可以，但必须通过统一入口聚合，而不是放任每个组件自己 @use。
- 建一个
src/styles/index.scss，在里面集中@use所有模块：@use "mixins/flex" as f; @use "mixins/layout" as l; - 在
vite.config.ts的preprocessorOptions.scss.additionalData中只写这一行：@use "@/styles/index.scss" as *; -
as *仅在此处生效，它把index.scss导出的所有成员提升到全局，但前提是这些成员本身已通过命名空间隔离过 - 禁止在
additionalData里直接@use "mixins/flex.scss" as *;—— 这等于又开了个全局污染口
真正难的不是写对语法，而是团队里有人忘了删掉旧的 @import，或者在某个组件里偷偷加了 @use "mixins/flex.scss" as *。模块化管不住人，只能靠 lint 规则和 CI 检查 @import 和裸 as * 的出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
