Bootstrap样式生效需确保加载顺序正确、路径真实存在、特异性足够，并优先使用CSS变量或组合选择器覆盖，同时注意reboot.css和Shadow DOM对样式的隐性影响。
直接在 angular.json 里加一行 Bootstrap CSS 路径，不等于样式就真生效了；更不等于你能安全覆盖它。很多“覆盖失败”根本不是写法问题，而是加载顺序、路径解析、或 CSS 特异性被悄悄绕过。
确认 Bootstrap CSS 真实加载且顺序正确
浏览器只认实际网络请求顺序，不认 HTML 里 <link> 的书写顺序。Webpack/Vite 构建时，@import 的位置也影响最终输出。
- 打开 DevTools → Network → 刷新页面，过滤
bootstrap.min.css，确认它状态码是200，且时间戳晚于你项目自己的styles.css - 若用
angular.json配置，路径必须指向真实存在的文件："node_modules/bootstrap/dist/css/bootstrap.min.css"—— 但注意：cnpm 或淘宝镜像安装后，真实路径可能是"node_modules/_bootstrap@5.3.3@bootstrap/dist/css/bootstrap.min.css"（带下划线和版本号），npm ls bootstrap可验证 - 在
src/styles.css中用@import时，路径要相对styles.css文件本身，例如：@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";，不能漏掉../
覆盖时别只靠 class 名，用组合选择器提权
Bootstrap 5 的 .btn.btn-primary 特异性是 0,2,0,0；你单写 .my-btn 是 0,1,0,0，天然被压。更糟的是，.my-btn 不继承 .btn 的 padding、border-radius，按钮会“塌掉”而不是“换色”。
- 正确写法：
.btn.btn-primary.my-submit—— 复用结构，既拉高权重，又保留所有基础样式 - 改导航链接 hover 色？写
.navbar-nav .nav-link:hover，而不是.nav-link:hover，避免被其他组件的.nav-link冲突 - 避免深度嵌套如
#header .nav .dropdown .btn，DOM 结构一变就全失效；优先用属性选择器：button[type="submit"].btn更稳
优先改 CSS 变量，而不是硬写覆盖规则
Bootstrap 5.3+ 把主逻辑移到 :root 变量上，比如 --bs-primary 控制主色，--bs-gutter-x 控制栅格间距。改变量是“动根”，写覆盖是“打补丁”。
立即学习“前端免费学习笔记（深入）”；
- 全局改主题色：在
bootstrap.min.css后加<style>:root { --bs-primary: #2c3e50; }</style>，比一堆.btn-primary { background: #2c3e50; }干净十倍 - 用 Sass 时，在
@import "bootstrap/scss/bootstrap";前重定义变量，例如：$primary: #2c3e50;—— 注意只对带!default标记的变量有效 - 拼错变量名（如写成
--primary而非--bs-primary）或漏分号，整行会被浏览器静默忽略，Computed 面板里根本看不到
别忽略 reboot.css 和 Shadow DOM 的隐身影响
很多“样式没变”不是因为你没覆盖成功，而是 bootstrap-reboot.css 在背后重置了原生行为：button、input 的默认边框/字体/盒模型全被改过；而 Angular 的 ViewEncapsulation.ShadowDom 或 innerHTML 渲染的内容，压根不走全局样式流。
- 检查按钮没圆角？先看
reboot.css是否已加载，它会影响button的border-radius和font-family - 用
innerHTML插入的 HTML 不会自动获得.btn样式，Angular 不会为动态内容应用全局封装 - 第三方 Web Component 启用了
ShadowDom封装，就完全无视你在styles数组里加的任何全局 CSS
真正难的不是写一条 .btn.my-theme { background: red; }，而是确认这条规则在哪个 DOM 节点上、由哪条 CSS 源触发、有没有被 reboot 或封装机制悄悄拦截。调试时多看 Elements 面板的 Computed 样式，少猜“应该生效”。
