@use能隔离SCSS类名冲突而@import不行，根本原因是@use强制创建私有命名空间、需显式前缀访问（如f.flex-center()），而@import是全局文本拼接，导致同名@mixin静默覆盖；且@use只识别下划线partial文件、禁止混用@import，否则整链降级为legacy模式。
为什么@use能隔离SCSS类名冲突，而@import不行
根本原因在于作用域机制不同：@import 是文本拼接，所有变量、@mixin、选择器都平铺进全局；@use 则强制创建命名空间，不加前缀就无法访问，天然防覆盖。你写两个 @mixin flex-center()，用 @import 时后一个会静默干掉前一个；用 @use "flex" as f 和 @use "layout" as l，就能同时存在 f.flex-center() 和 l.flex-center()，互不干扰。
必须显式配置的SCSS模块路径与命名规则
路径和文件名直接影响命名空间生成，错一点就失效：
-
@use只认下划线开头的 partial 文件（如_mixins.scss），不能写@use "mixins.scss"或@use "_mixins.scss" - 别名必须用
as显式声明，@use "flex" as f→ 调用必须是f.flex-center()，f.$primary - 同一文件中多次
@use "x"不会重复执行，但混用@import会让整条依赖链降级为 legacy 模式，命名空间全崩 - Vite 中若想全局可用，只能通过统一入口聚合：建
src/styles/index.scss，在里面@use "mixins/flex" as f，再在vite.config.ts的preprocessorOptions.scss.additionalData中写@use "@/styles/index.scss" as *;
SCSS类名本身怎么避免冲突？BEM + & 是关键
模块化解决的是 @mixin 和变量冲突，但最终生成的 CSS 类名仍可能撞车——这得靠写法规范：
- 嵌套里必须用
&__header，不是.header或& __header（空格会导致变成全局类） - 组件级类名建议带业务前缀，比如
.auth-form、.dash-card，别用.my-btn这种泛化词 -
%placeholder比@mixin更适合原子样式复用（如%sr-only），它不生成真实类名，只在@extend时注入，不会污染输出 CSS - 动态插值类名（如
.u-mt-#{$n}）不能用%placeholder，Sass 不支持，得改用@mixin或函数
验证是否真正生效的三个硬指标
别信配置写了就完事，打开编译后 CSS 或浏览器开发者工具看真实输出：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：类名含明确组件标识，如
.auth-form__submit、.dash-card__header - ✅ 正确：
@mixin调用带前缀，f.flex-center()编译后无报错，且未被其他同名@mixin覆盖 - ❌ 失效：控制台报
Undefined variable "$primary"却没检查是不是混了@import；或 DOM 上出现纯.button类名，说明 SCSS 没走模块化流程 - ⚠️ 容易被忽略：大小写敏感（
AuthForm和authform是两个命名空间）、路径层级（src/components/_mixins.scss和src/utils/_mixins.scss必须分开放）
