自定义css在bootstrap 5后不生效，主因是构建工具打乱加载顺序、选择器权重不足、scoped样式无法覆盖全局类、或动态插入节点脱离作用域；须验证真实link顺序、提升权重（如.btn.my-btn）、移出scoped、指定container使动态元素落入样式作用域。
自定义CSS在Bootstrap 5之后加载，仍不生效——大概率不是顺序错了，而是构建工具打乱了实际注入顺序，或你没检查浏览器最终渲染的 <link> 标签顺序。
确认浏览器里真实的CSS加载顺序
你以为 import 或 <link> 写在后面就稳了？现代构建工具（Vite、Webpack）常把所有 CSS 打包进一个文件，并按依赖图重排。必须手动验证：
- 右键页面 →「查看页面源代码」→ 搜索
bootstrap.min.css和你的custom.css - 确保你的 CSS 的
<link>确实在 Bootstrap 之后，且没加async或defer - CDN 场景下，把自定义 CSS 的
<link>明确放在 Bootstrap<link>下方，不要依赖 JS 动态插入
用 .btn.my-btn 提权，别碰 !important
单类 .my-btn 权重是 0,0,1,0，输给 Bootstrap 的 .btn.btn-primary（0,0,2,0）。浏览器根本不会执行你的规则，哪怕它写在最后。
- HTML 中给元素同时加 Bootstrap 类和自定义类：
<button class="btn btn-primary my-btn">Submit</button> - CSS 中写
.btn.my-btn { background-color: #d32f2f; }—— 权重立刻升到 0,0,2,0，与.btn.btn-primary平级 - 如需限定范围，加父容器前缀：
.dashboard .btn.my-btn（0,0,3,0），安全可控
Vue/React 单文件组件里 <style scoped></style> 不起作用
<style scoped></style> 生成的是带属性选择器的局部样式（如 button[data-v-abc123]），它不参与全局层叠，完全无法覆盖 .btn 这类全局类名。
- Vue 3：用
:deep(.btn)穿透作用域，或把覆盖规则移到全局 CSS 文件中 - React（如使用 emotion）：确保自定义样式生成的 class 被注入到
中 Bootstrap 之后的位置 - 别指望
scoped能“压过” Bootstrap —— 它连入场券都不发
JS 动态插入的 DOM 节点会脱离样式作用域
Modal、Tooltip、Dropdown 等组件默认 append 到 document.body，一出来就跳出你写的 .dashboard .btn.my-btn 作用域，样式立刻失效。
- Bootstrap Modal：手动指定 container，比如
new Modal(el, { container: '.dashboard' }) - Tippy.js：用
appendTo: document.querySelector('.dashboard') - 关键不是改样式，而是让动态节点物理上落在你设定的作用域容器内
真正难的不是写对一行 CSS，而是让 JS 插入的节点也落在那个带前缀的容器里——这点在 Modal、Toast、Select 弹层中几乎必然出问题，却最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
