直接 import Bootstrap CSS 会污染 Element UI，因其全局选择器（如 .btn、input）覆盖 Element 组件依赖的原生标签样式，且 scoped 样式无法影响 Element 自身引入的 CSS；有效隔离需按需导入、命名空间包裹及重置剥离。
为什么直接 import Bootstrap CSS 就会污染 Element UI
因为 bootstrap/dist/css/bootstrap.min.css 里所有规则都是无前缀的全局选择器，比如 .btn、.form-control、.row。Element UI（或 Element Plus）虽然用 .el-button 做了前缀，但它内部仍依赖原生标签重置（如 input、button、table 的默认样式），而 Bootstrap 的重置会直接覆盖这些基础渲染行为。你写 <el-input></el-input>，最终 DOM 里还是一个带 class="el-input__inner" 的 <input> —— 这个 <input> 正好被 Bootstrap 的 input.form-control 规则捕获。
scoped 样式根本不管用，别白费力气
<style scoped></style> 只影响你组件内写的样式，对 Element UI 自己注入的 CSS 完全无效。它不重写、不拦截、也不包裹 element-plus/theme-chalk/input.css 这类外部文件。哪怕你写了 :deep(.el-input__inner) { border: 1px solid blue; }，如果 input 元素同时匹配了 Bootstrap 的 input.form-control（权重 0,0,2,1），那你的规则大概率被划掉。
- Vue 2 用
::v-deep(.el-input__inner)，Vue 3 用:deep(.el-input__inner)，但都只作用于当前组件模板中渲染出的节点，不改变全局层叠顺序 - 若
el-input被v-if移除，对应:deep规则也不会生效 - 不要写
:deep(.el-input) .el-input__inner—— 这种写法在 Vue 3 中可能因编译时机问题完全不匹配
真正有效的隔离方式：命名空间 + 按需 + 重置剥离
不是靠加载顺序或 !important 补救，而是从构建源头切断全局污染路径：
- 停用全量引入：
import 'element-plus/dist/index.css'→ 改为按需导入单个样式，例如import 'element-plus/theme-chalk/button.css'和import 'element-plus/theme-chalk/input.css' - 跳过
base.css（它含全局重置），改用空 reset 或自定义轻量重置，避免和 Bootstrap 对box-sizing、font-size的设定冲突 - 给使用 Element 组件的区域加唯一容器 class，如
<div class="admin-ui"><el-button></el-button></div>，再写.admin-ui :deep(.el-button) { ... }局部控制 - Bootstrap 也要改：用 Sass/Less 重编译，把整个
bootstrap.scss包进.my-app { @import "bootstrap"; }，并确保根元素有class="my-app"
容易被忽略的坑：JS 组件与变量作用域
即使 CSS 隔离成功，Bootstrap 的 JS 组件（如 Modal、Dropdown）仍可能失效——它们硬编码查找 .modal、.dropdown-menu，而你现在实际是 .my-app .modal。必须手动传入 selector：
立即学习“前端免费学习笔记（深入）”；
new Modal(document.querySelector('.my-app .modal'))- 或改用 JS 调用方式，放弃
data-bs-toggle这类属性触发 - Bootstrap v5+ 的 CSS 变量（如
--bs-primary）不会被命名空间包裹，需单独用:root或.my-app下重定义
样式污染从来不是“哪个库更强势”的问题，而是两个独立全局系统在同一个 里打架。想让它不打，就得让它们各住各的房间，而不是塞进同一张床。
