bootstrap 4与5混用必然导致样式和js全面冲突，因类名完全重叠、变量体系互不兼容、js选择器硬编码且无版本标识，无法通过配置规避。
Bootstrap 4 和 5 混用时，CSS 不是“部分覆盖”，而是从根上打架——类名相同、作用域全开、变量不兼容，污染是必然结果，不是配置能绕开的。
类名完全重叠，后加载者无条件胜出
两者都用 .btn、.row、.col-6 这类零前缀类名，浏览器层叠规则只认加载顺序和选择器权重，不认版本号。哪怕你只在某个页面 import v4，在另一个页面 import v5，只要它们最终都进了 ，.btn 就会按引入顺序被反复覆盖。
- v4 的
.btn设了border-color: #ced4da；v5 的.btn默认无边框色，靠:focus和:invalid动态加——混用后你看到的可能是 v4 的静态边框 + v5 的伪类变色，视觉错乱 -
.row在 v4 是display: block+ 负 margin；v5 是display: flex+ gap 变量——DOM 里同一个.row元素，computed 样式可能一半来自 v4，一半来自 v5，高度塌陷或列宽异常就是直接表现 - 像
.form-control这种基础类，v4 和 v5 对padding、line-height、font-size的取值不同，混用后输入框高度忽高忽低，且无法用单一 CSS 修复
变量与 CSS 自定义属性（CSS Custom Properties）互不感知
Bootstrap 5 大量依赖 --bs-primary、--bs-gutter-x 等 CSS 变量驱动样式，而 v4 完全没有这些变量，只靠 Sass 变量编译成静态值。你在 :root 里设了 --bs-primary: #dc3545，对 v4 的 .btn-primary 完全无效；反过来，v4 的 $primary Sass 变量也不会影响 v5 的 CSS 变量计算逻辑。
- v5 的栅格系统靠
--bs-gutter-x控制列间距，v4 靠硬编码的margin-left: -15px——两者同时存在时，gutter 实际变成-15px + var(--bs-gutter-x)，间距翻倍 - v5 的
.text-primary是color: var(--bs-primary)，v4 是color: #007bff——如果你改了 CSS 变量，v4 文字颜色不变；如果改了 v4 的 Sass 变量，v5 文字也不变 - 没有统一的变量桥接机制，也无法通过 postcss-preset-env 等工具自动降级转换
JS 组件选择器与 DOM 插入点彻底脱节
Bootstrap JS 插件（Modal、Dropdown、Tooltip）内部查找元素用的是硬编码类名，比如 .dropdown-menu、.modal-backdrop，不带任何版本标识。一旦 v4 和 v5 的 CSS 同时存在，JS 找到的 DOM 节点可能匹配 v4 的样式规则，但被 v5 的同名规则覆盖，或者反之。
- Modal 默认 append 到
document.body，但 body 下可能同时有 v4 和 v5 的全局样式，导致 backdrop 半透明失效、动画 class 不触发 - v4 的
.dropdown-menu用top: 100%+left: 0定位，v5 改用 Popper.js 计算位置——若 v4 CSS 先加载，v5 JS 执行时发现.dropdown-menu已被 v4 规则设置了position: absolute，Popper 可能拒绝接管，菜单悬空或偏移 - data 属性如
data-toggle="dropdown"（v4）和data-bs-toggle="dropdown"（v5）共存时，JS 可能只响应其中一个，另一个静默失败
构建产物无法区分来源，devtools 里根本看不出谁在生效
你在 DevTools 的 Styles 面板里看到的 .btn 规则，可能来自 bootstrap.min.css（v4）、bootstrap.css（v5）、甚至你自己写的 custom.css 里的同名覆盖——浏览器不标记来源版本，只显示文件名和行号。而实际项目中，这些文件往往通过不同路径引入：node_modules/bootstrap@4/dist/css/bootstrap.min.css、node_modules/bootstrap@5/dist/css/bootstrap.css、CDN 链接、甚至内联 style 标签。
- Webpack/Vite 构建时，多个
import语句可能被合并或重排序，尤其开启 CSS 提取（mini-css-extract-plugin）后，顺序更难控制 - Vite 的
css.preprocessorOptions.scss.additionalData若注入了 v4 的变量，又同时 import v5 的 SCSS，Sass 编译器会报Undefined variable或静默忽略，错误不抛出但样式已错 - 最隐蔽的污染点：第三方 UI 库（如 Element Plus）内部也依赖
.btn或input.form-control，它可能和 v4/v5 中的某一个版本形成三方冲突，排查链路直接拉长三倍
真正要隔离，必须放弃“同时引入两个 dist 文件”的想法——要么切到单一版本并完成迁移，要么在 SCSS 编译阶段用 @layer + :where() 把整个 Bootstrap 包进命名空间，且 JS 组件初始化时显式传 container 选项。任何想靠加载顺序、!important 或 postcss 插件临时修补的方案，都会在下一个组件更新或浏览器版本升级后崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
