@use 能隔离 Sass 模块逻辑但无法阻止 CSS 规则全局泄露，真正样式隔离需依赖 CSS Modules、Shadow DOM 或 iframe 等构建层/运行时方案。
用 @use 替代 @import 是防止 Sass 模块级污染的最有效手段，但仅靠它无法阻止 CSS 规则本身泄露到全局——真正隔离样式规则必须跳出 Sass 思维，靠构建层或运行时方案。
为什么 @import 一定会污染全局作用域
@import 不是“导入”，而是“合并作用域”：所有变量、@mixin、%placeholder 和 CSS 规则，都会平铺进当前文件，不加前缀、无边界。常见后果包括：
- 两个模块都定义了
$spacing-sm，后@import的直接覆盖前者，且编译器不报错 -
@import "button"和@import "card"都含@mixin shadow()，最终只保留后者，调用方完全不知情 - 重复
@import "_reset.scss"（如被多个组件引用），会输出多份重置样式，体积膨胀、优先级混乱 - IDE 跳转失效，因为同名成员已失去唯一性
@use 如何强制模块隔离
@use 默认创建私有命名空间，所有成员不可见，必须显式带前缀访问——这是 Dart Sass 编译器的硬性约束，不是可选项。
- 写
@use "base/vars" as v，就必须用v.$font-size-base；直接写$font-size-base会报错Undefined variable - 同一文件多次
@use "utils/functions"，Sass 内部自动去重，不会重复执行 - 第三方模块如
sass:math必须写@use "sass:math"，混用@import "sass:math"会导致函数冲突 - 想全局解构？只允许
@use "base/vars" as *，且该文件不能含任何@mixin或样式规则
嵌套规则 ≠ 样式作用域隔离
Sass 嵌套生成的选择器仍是全局的：.card { .title { ... } } 编译为 .card .title，它依赖 DOM 层级，且仍可能被其他 .title 干扰或覆盖。
立即学习“前端免费学习笔记（深入）”；
- 真正封装需靠
&显式绑定，例如&__header生成.card__header，不依赖结构，也避免命名冲突 - 根选择器建议加唯一前缀（如
.uikit-modal），而非泛化词（如.my-modal） - 嵌套超过 3 层就该警惕：选择器权重飙升，低配设备渲染变慢，且后期极难覆盖
-
:global()是 CSS Modules 的语法，Sass 本身不支持；在 Sass 中混用会导致 IDE 失去提示、重构断链
第三方 CSS 规则根本无法被 @use 封装
@use 只能封装 Sass 逻辑（变量、函数、@mixin），对已编译的 CSS 规则无效。只要 @import "bootstrap/scss/buttons" 出现在编译链中，它的 CSS 就会无差别注入全局。
- 错误做法：
@import "node_modules/bootstrap/dist/css/bootstrap.min.css"—— 直接污染全局 - 安全做法：
@use "bootstrap/scss/functions"（只加载逻辑），但禁用@import "bootstrap/scss/bootstrap"（产出全局 CSS） - 真正隔离路径只有三个：
CSS Modules（构建时哈希类名）、Shadow DOM（原生封装）、iframe（彻底隔离） - Vue 用户请用
<style scoped>+::v-deep穿透，但穿透后务必加容器前缀（如.my-form ::v-deep .el-input）
最容易被忽略的一点：Sass 模块系统再严密，也管不住最终输出的 CSS 规则。一旦你写了 .btn { color: red }，它就进了全局样式表——命名空间、嵌套、@use 全部失效。控制样式泄漏的终点，不在 Sass 编译器里，而在构建配置和组件封装方式上。
