核心在于控制作用域、加载顺序和选择器优先级；外部CSS若在Bootstrap前引入会覆盖其重置样式，若在其后又可能用宽泛选择器破坏排版，正确做法是将其置于Bootstrap之后、自定义样式之前，并通过wrapper嵌套或Shadow DOM实现物理隔离。
直接引入外部 CSS 库大概率会破坏 Bootstrap 的排版逻辑，除非你主动控制作用域、加载顺序和选择器优先级。核心不是“能不能引”，而是“怎么引才不炸 layout”。
为什么 link 放错位置会导致 Bootstrap 排版错乱
Bootstrap 的 CSS 依赖特定的层叠顺序：重置（normalize/reset）→ 基础工具类（container、grid、typography）→ 组件 → 工具类（utilities）。外部库如果在 Bootstrap 之前加载，它的 margin、box-sizing 或 font-size 可能覆盖 Bootstrap 的基础重置；如果在之后加载，又可能用更宽泛的选择器（如 button、h1）意外覆盖已有样式。
- 常见错误现象：
.container宽度异常、row不居中、btn圆角消失、文字行高突变 - 必须把外部 CSS 放在 Bootstrap 之后，但又不能无脑放最后——它得在你的自定义样式 之前，否则你写的
.my-btn { padding: .5rem 1rem; }会被外部库的button { padding: 0; }覆盖 - 若外部库自带重置（如 Modern Normalize），务必删掉或禁用它，只留 Bootstrap 自带的
@import "~bootstrap/scss/reboot";
tailwind.config.js 的 prefix 对 Bootstrap 无效，但你可以手动加 wrapper
Tailwind 的 prefix 只影响它自己生成的类名，对已存在的 Bootstrap 类（col-6、btn-primary）不起作用。想让外部库（比如一个叫 shoelace.css 的组件库）不污染 Bootstrap 的全局样式，唯一靠谱的方式是物理隔离。
- 给外部库的容器加唯一 class，例如
<div class="sl-root">...</div> - 在 SCSS 中用嵌套重写作用域：
.sl-root { @import 'shoelace/dist/themes/light.css'; }（注意：部分 CSS 库不支持这样 import，需转成 SCSS 或用 PostCSS 插件） - 更稳妥的做法：用
<iframe>加载外部库的独立页面，或用 Shadow DOM 封装（适合 Web Component 场景） - 不要指望
all: unset全局清样式——它会把 Bootstrap 的display: flex、position: relative也干掉
使用 @import 引入外部 CSS 时，Webpack/Vite 的路径和解析陷阱
在 main.scss 里写 @import '../node_modules/xxx/dist/xxx.css'; 看似简单，但实际会触发多个隐性问题：
立即学习“前端免费学习笔记（深入）”；
- Webpack 默认不解析
.css文件中的@import，需启用css-loader的url: false和importLoaders配置 - Vite 中
@import只支持相对路径或别名，@import 'npm:xxx/dist/xxx.css'会报错，得改用import 'xxx/dist/xxx.css'在 JS 中导入 - 如果外部库用了
url(./icon.svg)，而它实际在node_modules/xxx/assets/下，路径会 404——必须配resolve.alias或用postcss-url重写 - Bootstrap 5.3+ 使用
data-bs-*属性，某些外部库（如 older Bulma）会用data-*做交互，冲突时优先级取决于 JS 执行顺序，不是 CSS 能解决的
真正难的不是“加一行 link”，而是判断这个外部库是否修改了 :root 变量、是否注入了 !important、是否动态插入 style 标签——这些都不会出现在你写的 SCSS 里，却会在运行时悄悄覆盖 Bootstrap 的栅格计算和响应式断点。
