@use配合as别名是解决Sass变量命名冲突最可靠的方式——它通过编译器强制隔离作用域，避免@import文本拼接导致的变量覆盖；每个模块需显式前缀访问（如clr.$primary），同一文件多次@use自动去重，且混用@import会直接报错。
直接用 @use 配合 as 别名是解决 Sass 变量命名冲突最可靠的方式——它不靠约定、不靠运气，而是由编译器强制隔离作用域。
为什么 @import 一定会导致变量覆盖
@import 是文本拼接，所有被导入文件的 $variable、@mixin、@function 全部平铺进当前作用域。如果两个文件都定义了 $spacing-sm，后 @import 的那个值会直接覆盖前一个，且毫无提示。
- 错误现象：
Undefined variable "$spacing-sm"或样式突然变样，但查不到哪改的 - 常见场景：团队多人维护不同模块的
_vars.scss，或同时引入 Bootstrap 和自定义工具库 - 根本原因：
@import没有模块边界，!default只在首次赋值时生效，后续导入不触发回退逻辑
@use "path" as prefix 怎么写才不踩坑
必须显式声明别名，否则默认以文件名作前缀（如 _colors.scss → colors.$primary），但文件名易歧义、难维护。
- 推荐写法：
@use "src/styles/colors" as clr;，然后统一用clr.$primary - 路径不含扩展名，也不加下划线：
@use "colors"可以，@use "_colors.scss"会报错 - 不能把
@use放在嵌套规则里，必须在文件顶部、任何 CSS 规则之前 - 同一文件多次
@use不会重复执行，Sass 内部自动去重
第三方库（如 Bootstrap）怎么安全接入
Bootstrap 5.3+ 已原生支持 @use，但结构和旧版完全不同——不能直接 @use "bootstrap/scss/mixins"，必须走官方入口。
- 正确顺序：先
@use "bootstrap" with ($enable-grid-classes: false)，再@use "bootstrap/scss/functions" - 函数调用必须带前缀：
bs.str-to-num("12px")，不是str-to-num("12px") - Bootstrap 4 或未适配的库，
@use会报错，只能保留@import，或通过构建工具做兼容层 - 检查版本：
npm list bootstrap，低于 5.3 就别硬切
混入（@mixin）和占位符（%placeholder）的命名冲突怎么防
混入名冲突比变量更隐蔽，因为不报错，只静默覆盖；而占位符天生不污染全局，但必须被 @extend 才生效。
- 混入必须带前缀调用：
btn.button-reset()，不能省略btn. - 占位符推荐用于原子级基底类（如
%sr-only、%clearfix），它不会生成独立 CSS，只在@extend处按需注入 - 不要对含插值的选择器用占位符：
%u-mt-#{$n}会报"%placeholder" is not a valid selector - 跨文件继承占位符，必须确保该文件已
@use或@forward进当前作用域
真正容易被忽略的是：一旦项目中混用 @import 和 @use，Sass 编译器会直接报错，而不是降级处理——这意味着迁移必须全量切换，不能“局部试点”。
