Bootstrap 5.2+ 必须用 CSS 变量覆盖，默认写 .btn-primary { background-color: red; } 无效；应重设 --bs-btn-primary-bg 等变量，确保自定义 CSS 在 Bootstrap 后加载，并同步更新所有相关状态变量与衍生色。
Bootstrap 5.2+ 必须用 CSS 变量覆盖，直接写 .btn-primary { background-color: red; } 无效
Bootstrap 5.2 起，按钮、文字、背景等几乎所有主题色都由 CSS 变量驱动，.btn-primary 的样式实际是 background-color: var(--bs-btn-primary-bg);。你写的 background-color 规则权重低、不覆盖状态（:hover 等），且被变量值动态覆盖——三重失效。
正确做法是重设变量本身：
-
:root中声明：--bs-primary: #4f46e5;（影响.text-primary、.bg-primary等） - 按钮需额外设：
--bs-btn-primary-bg、--bs-btn-primary-border-color、--bs-btn-primary-hover-bg、--bs-btn-primary-disabled-bg - 下拉菜单改
--bs-dropdown-bg和--bs-dropdown-color - 所有变量必须拼写准确，漏一个或错一个字母（如写成
--bs-primeary）就静默失效
自定义 CSS 文件必须在 Bootstrap 之后真实加载，顺序 ≠ 生效
HTML 中 写在后面，不代表浏览器真按这个顺序应用。常见失效原因：
- Network 面板里
bootstrap.min.css请求失败（404 或 CORS），但页面仍渲染——你的custom.css实际没对手 - Django/Flask 模板中
{% static 'css/custom.css' %}路径错误，返回 404 - Vite/Webpack 中用
import './custom.css'，但bootstrap.min.css是通过index.html引入的，加载时机不可控 - CDN 地址被拦截（尤其国内访问 jsdelivr），导致 Bootstrap 根本没加载，你的覆盖规则反而成了“默认”
选择器权重不够时，!important 不是解药，而是隐患
写 .btn-primary { background-color: #4f46e5 !important; } 看似生效，但会破坏：
-
:hover、:disabled状态样式——因为 Bootstrap 原生用了.btn.btn-primary:hover { background-color: var(--bs-btn-primary-hover-bg) !important; }，你只覆盖了默认态 - 可访问性焦点环：
.btn-primary:focus和.btn-primary:focus-visible很可能回退到默认蓝 - 后续升级 Bootstrap 时，新组件可能依赖变量逻辑，硬覆盖规则会突然失效
- 深色模式下无法响应：
@media (prefers-color-scheme: dark)无法接管你写的!important值
只改 $primary Sass 变量还不够，$theme-colors 映射必须同步更新
如果你用 Sass 编译（npm + @import "bootstrap/scss/bootstrap"），光改 $primary: #4f46e5; 会导致 .text-primary 生效，但 .bg-primary、.border-primary 可能仍为旧色——因为 Bootstrap 工具类生成逻辑依赖 $theme-colors 这个 map。
- 必须用
map-merge()扩展，不能直接赋值：$theme-colors: map-merge($theme-colors, ("primary": $primary)); - 想加新颜色（如
brand）也走同一路径："brand": #2563eb，否则.text-brand类根本不会编译出来 - 漏掉
$theme-color-interval（默认 10）会导致text-primary在高饱和主色下对比度不足，WCAG AA 不达标 - 改完必须重新编译 CSS，热更新不会触发，得手动重启构建进程
改主题色不是换一个值就完事，变量、映射、衍生色、深色适配、构建流程——任何一个环节断链，都会在某个角落突然崩出默认蓝。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
