@use无法隔离第三方css规则，仅能封装变量、函数和mixin；真正样式隔离需依赖css modules、shadow dom或iframe等运行时/构建层方案。
直接用 @use 或 @import 加载第三方 CSS 文件（比如 bootstrap.min.css）会导致全局污染，没有真正隔离——这是最常被误以为“能解决”的误区。
为什么 @use "bootstrap/scss/bootstrap" 不能隔离样式
Sass 的 @use 只封装变量、函数和 mixin，不封装已编译的 CSS 规则。只要你 @use 或 @import 了含实际样式的文件（如 _buttons.scss），最终输出的 CSS 就是全局生效的，和你在 main.scss 里手写 .btn { } 没区别。
-
@use "bootstrap/scss/functions"→ 安全，只引入逻辑，不产出 CSS -
@import "bootstrap/scss/buttons"→ 危险，立即向最终 CSS 注入所有按钮样式 -
@use "bootstrap/scss/bootstrap" as bs→ 命名空间对 CSS 规则完全无效，.card还是全局的
真正能限制影响范围的实操路径
别在 Sass 层面幻想“作用域”，CSS 本身不支持。必须切换到运行时或构建层方案：
- React/Vue 项目：用
.module.scss+postcss-modules，把 Bootstrap 类转成哈希类名（如Button_button__abc123），再手动映射：className={styles["btn"]} - 纯静态页：用
iframe加载依赖第三方样式的组件，彻底隔离 DOM 和样式树 - 现代浏览器环境：把第三方 UI 封进 Shadow DOM，外部样式无法穿透，内部样式也不会漏出 —— 这是目前唯一语义上“真正隔离”的方式
- 如果必须塞进主样式流：只
@use变量和 mixin，再用原生类名手动重写关键组件（如自己写.my-card，调用bs.$card-padding），放弃直接复用第三方 CSS
按需导入 + 显式重置才是现实选择
与其强求隔离，不如控制注入范围和覆盖成本：
- Bootstrap 5 提供了细粒度 SCSS 文件，优先
@use "bootstrap/scss/forms"而非整个bootstrap - 在入口
main.scss最顶部加一层容器类包裹：.my-app { @import "bootstrap/scss/buttons"; }，但注意这会破坏 JS 绑定（如data-bs-toggle依赖原生.btn） - 禁用
!important覆盖，它会让后续维护者无法预测样式来源，尤其在混合多个第三方库时 - 所有第三方样式导入必须放在
_variables.scss和_mixins.scss之后，否则变量引用会报Undefined variable
第三方 CSS 集成最易被忽略的一点：你不是在“引入一个库”，而是在往全局样式池里倒一桶颜料。控制它的方式从来不是“命名空间”，而是“倒多少”和“倒在哪”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
