Bootstrap 5 的 CSS 变量定义在 _variables.scss 中，并编译至 :root 块；覆盖需确保自定义 :root 在 Bootstrap CSS 之后加载、拼写准确且无语法错误，Sass 重定义变量更稳定。
Bootstrap 5 的 CSS 变量在哪定义
bootstrap 5 开始全面转向 css 自定义属性（即 css 变量），所有颜色、间距、圆角等基础设计 token 都集中在 _variables.scss 和最终编译出的 :root 块里。你不能靠覆盖单个 class（比如 .btn）来统一改主题色——得从变量源头下手。
关键点：Bootstrap 官方构建的 CSS 文件（如 bootstrap.min.css）里，:root 已经写死了全部变量值；你直接在 HTML 里写 :root { --bs-primary: red; } 是有效的，但必须放在 Bootstrap CSS 之后加载，否则会被覆盖。
覆盖变量时为什么加 !important 没用
CSS 变量本身不支持 !important，它只作用于声明语句层级，不是属性值。写 --bs-primary: red !important 会直接让整条声明无效（浏览器忽略该行）。
常见错误现象：
– 页面没变色，开发者工具里看到变量值仍是默认的 #0d6efd
– 控制台没报错，但自定义 :root 块被浏览器灰掉（invalid property value）
正确做法是确保你的 :root 声明：
立即学习“前端免费学习笔记（深入）”；
- 在
<head>中位于 Bootstrap CSS 之后 - 变量名拼写完全匹配（比如 Bootstrap 5.3 是
--bs-primary，不是--primary或--bs-color-primary） - 没有语法错误（冒号后要空格，分号结尾，不能漏）
示例：
:root {
--bs-primary: #e63946;
--bs-body-color: #212529;
}用 Sass 重定义变量才是稳定方案
如果你项目用 Sass 构建（比如 Vue CLI、Create React App 配了 sass-loader），直接改 _variables.scss 最可靠。Bootstrap 的变量大多带 !default，意味着你可以提前声明同名变量，它就不会用内置默认值。
使用场景：
– 需要动态生成多套主题（深色/浅色/品牌定制）
– CI/CD 构建流程中需保证样式一致性
– 要复用 Bootstrap 的内部计算逻辑（比如 shade-color($primary, 20%)）
实操建议：
- 新建
my-variables.scss，在引入 Bootstrap 前@import它 - 只覆盖你需要的变量，其余留空（避免意外破坏响应式断点等底层逻辑）
- 注意变量依赖顺序：比如
$primary影响$theme-colors，所以先定义前者
示例：
$primary: #1d3557; $secondary: #a8dadc; @import "bootstrap/scss/bootstrap";
覆盖后某些组件没生效？检查组件是否硬编码了颜色
不是所有 Bootstrap 组件都严格遵循 CSS 变量。比如 .btn-outline-* 类在部分版本里仍用 border-color: $gray-400 这类 Sass 变量直出，没走 --bs-border-color；又比如 .form-control:focus 的 box-shadow 可能写死 0 0 0 0.25rem rgba(13, 110, 253, 0.25)，绕过了 --bs-primary-rgb。
这时候就得双管齐下：
- 优先查 Bootstrap 官方源码中对应组件的 SCSS 文件，确认它是否读取变量
- 对未适配的样式，用更具体的 CSS 选择器手动覆盖（比如
.btn-outline-primary:focus） - 别迷信“全局变量一改全变”，尤其涉及伪类、阴影、渐变时，务必真机验证
容易被忽略的是：CSS 变量作用域是继承的，但组件内联 style 或 JS 注入的样式不会自动响应 :root 变更——这类动态样式得你自己用 JS 同步更新。
