必须在 bootstrap.min.css 之后于 :root 中声明 --bs-primary 等变量，如 :root { --bs-primary: #e63946; } 紧跟其后；需同步设置 --bs-primary-rgb 等链式变量，且变量名须完全匹配 bootstrap 5.3+ 规范。
覆盖 --bs-primary 等颜色变量必须在 bootstrap.min.css 之后声明
直接写 :root { --bs-primary: #e63946; } 是有效的，但前提是它出现在 Bootstrap 的 CSS 文件加载之后。如果放在 最前面，或者被 Webpack/CRA 的 CSS 注入顺序搞乱，变量值就根本不会生效——开发者工具里能看到该行被灰色标记为“invalid”，实际取的还是默认 #0d6efd。
常见错误现象包括：.btn-primary 没变色、.alert-primary 文字模糊、.border-primary 仍是蓝色。这不是代码写错了，而是加载时机不对。
- 最稳妥的做法：把自定义
<style></style>放在<link rel="stylesheet" href="bootstrap.min.css">正下方 - 在 Create React App 中，避免在组件内
import './custom.css'，改用public/index.html的<style></style>块或全局 CSS 文件并确保 import 顺序 - 变量名必须完全匹配：Bootstrap 5.3+ 是
--bs-primary，不是--primary或--bs-color-primary -
!important对 CSS 变量无效，写--bs-primary: red !important会直接让整行失效
只改按钮背景色？优先重设 --bs-btn-bg 而非覆盖 .btn 类
硬写 .btn { background-color: #6a5acd !important; } 看似快，但会漏掉 :hover、:active、:disabled 状态，且破坏 btn-outline-primary 的逻辑（它依赖 --bs-btn-bg: transparent）。
Bootstrap 5+ 的按钮样式全部由变量驱动，改对变量，所有状态自动同步：
- 改默认填充按钮：
--bs-btn-bg、--bs-btn-border-color、--bs-btn-hover-bg、--bs-btn-active-bg - 改空心按钮：
--bs-btn-color、--bs-btn-border-color、--bs-btn-bg（必须设为transparent） - 若只想影响某类按钮（如仅
.btn-primary），把选择器换成.btn-primary更安全，避免波及.btn-secondary - 深色模式下需配合
@media (prefers-color-scheme: dark)单独重设，CSS 变量本身不自动响应系统主题
新增主题色（如 navy）不能只改 $theme-colors，得走 Sass 编译
CSS 变量无法动态新增主题色；--bs-navy 不是 Bootstrap 定义的变量，写了也不会被 .btn-navy 或 .text-navy 识别。想真正支持 btn-navy，必须用 Sass 重编译。
关键点不是“加一个颜色”，而是让整个主题系统识别它：
- 新建
_custom.scss，在@import "bootstrap/scss/variables"之前定义$navy: #0f766e;和$navy-rgb: 15, 118, 110; - 用
map-merge($theme-colors, ("navy": $navy))增量扩展，不是直接赋值（否则清空所有内置色） - 必须显式调用
@include theme-colors();，否则.btn-navy类根本不会生成 - 确保
@import "bootstrap/scss/functions"在最前，否则map-merge和颜色函数会报错
RGB 版本变量（如 --bs-primary-rgb）必须手动同步
Bootstrap 很多组件（比如 .alert-primary 的背景透明度、.btn-primary:focus 的阴影）内部用的是 rgba(var(--bs-primary-rgb), .1) 这种写法。你只改了 --bs-primary，但没动 --bs-primary-rgb，结果就是颜色变了，但半透明层还是旧的 RGB 值，视觉上严重错位。
正确做法是成对修改：
-
--bs-primary: #2563eb;→ 对应--bs-primary-rgb: 37, 99, 235; -
--bs-body-bg: #f9fafb;→ 对应--bs-body-bg-rgb: 249, 250, 251; - 不要靠 JS 动态计算：CSS 变量不支持
rgb()函数运行时解析，必须手写逗号分隔的数值 - 没有现成工具自动转换，建议用 VS Code 插件或在线十六进制转 RGB 工具辅助
最容易被忽略的是变量链式依赖——改一个 --bs-btn-bg 看似简单，但 btn-outline-* 、btn-link、btn-sm 的 padding 计算都可能间接依赖它。真要稳定定制，Sass 重编译仍是唯一可控路径；纯 CSS 变量适合快速微调，不适合深度主题重构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
