自定义主题不生效主因是css层叠顺序与选择器权重不足：需确保custom.css在html中位于bootstrap之后，用组合选择器提权而非!important，并在全局css中覆盖而非scoped/css modules。
自定义主题不生效，大概率不是你写错了样式，而是它根本没参与 CSS 层叠竞争——Bootstrap 的规则先加载、权重更高，你的样式被“静默丢弃”了。
检查 HTML 中 <link> 标签的实际顺序
你以为在 main.js 里 import './custom.css' 写在 import 'bootstrap/dist/css/bootstrap.min.css' 后面就稳了？构建工具（Vite/Webpack）可能把所有 CSS 打包进一个 index.css，并按依赖图重排顺序。最终起作用的是浏览器实际解析的 里的 <link> 顺序。
- 打开开发者工具 → 查看页面源码（右键 → “查看页面源代码”），确认
<link rel="stylesheet" href="...bootstrap.min.css">确实在你的custom.css之前 - CDN 场景下，手动把自定义 CSS 的
<link>放在 Bootstrap<link>下方，且不要加async或defer - Vite 用户：检查
vite.config.ts是否启用了css.preprocessorOptions，它可能导致样式注入时机错乱
用组合选择器提权，而不是堆 !important
Bootstrap v5+ 大量使用 [data-bs-*] 和复合类（如 .btn.btn-primary），权重天然比单类高。直接写 .btn { color: red } 基本无效，因为它的 specificity 是 0,0,1,0，而 Bootstrap 的 button.btn 是 0,0,2,1。
- 改用
body .my-section .btn或#app .btn-primary—— 这类组合选择器权重升到0,0,2,0或更高，且自然限定作用域 - 避免全局
!important：它虽能赢一次，但下次 Bootstrap 升级后，它可能自带!important规则（比如.form-control:focus），你就得反向对冲 - 别碰 ID 选择器滥用：虽然
#my-btn权重高，但破坏可维护性，且和 React/Vue 的组件化思路冲突
Vue/React 项目中 <style scoped></style> 或 CSS Modules 不覆盖全局类
你在 Vue 单文件组件里写 <style scoped></style>，或者 React 里用 Button.module.css，然后给按钮加 class="btn btn-primary my-btn" —— 这时 .my-btn 样式根本不会影响 .btn 的表现，因为 scoped 和 CSS Modules 只作用于你声明的类名，不参与全局层叠。
- 要覆盖
.btn，必须写在**全局 CSS 文件**中，并确保它在 Bootstrap 之后加载 - 如果坚持用模块化方案，改用
className={clsx('btn btn-primary', styles.myBtn)}+ 全局提权选择器（如.my-section .btn）配合 - 注意：Bootstrap 的某些样式（如
.btn:focus）是伪类，scoped类无法穿透，只能靠全局规则接管
最常被忽略的一点：就算你解决了加载顺序和权重，如果目标元素上根本没有你写的 class（比如漏了 class="my-theme"），或者该 class 被 JS 动态移除了，样式依然不会出现。打开开发者工具的 Computed 面板，先确认那个属性是否被划掉，再点 Styles 看它到底从哪条规则来——别猜，要看真实生效链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
