必须重编译CSS才能真正修改Bootstrap 5的$primary变量，因它是Sass变量而非运行时CSS自定义属性；需同步更新$primary-rgb和$primary-text-emphasis，并在import Bootstrap前定义，否则组件状态和衍生色将失效。
修改 Bootstrap 5 的 $primary 变量必须重编译 CSS
bootstrap 5 默认用 sass 管理颜色变量，$primary 是一个 sass 变量，不是运行时可覆盖的 css 自定义属性。直接在 html 中改 style 或用 !important 覆盖类名（如 .btn-primary）只能局部生效，且容易漏掉组件内部状态（比如 :hover、:disabled、.alert-primary、.border-primary 等）。真正统一修改，必须从源码层重定义变量并重新编译。
- 你得有 Node.js 和构建工具（如
dart-sass或 Webpack +sass-loader） - 不能只改一个
$primary—— 还要同步调整$primary-rgb和$primary-text-emphasis，否则部分组件（如.text-primary在深色背景上）会失效或对比度不合规 - Bootstrap 官方的
bootstrap/scss/_variables.scss文件里，$primary默认是#0d6efd，但它的衍生变量（如$primary-bg-subtle）也依赖它，跳过会导致 subtle 背景色错乱
推荐做法：新建 _custom.scss 并按顺序 import
别直接改 Bootstrap 源文件——升级时会被覆盖。标准做法是新建一个自定义 Sass 文件，在其中先覆盖变量，再完整导入 Bootstrap：
// _custom.scss // 1. 设置新主色（十六进制或 rgb() 均可） $primary: #2563eb; $primary-rgb: 37, 99, 235; // 2. 可选：调整对应文本强调色（确保 WCAG 对比度） $primary-text-emphasis: #1d4ed8; // 3. 必须在 import bootstrap 之前完成变量定义 @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ……其余模块按需导入（或直接 @import "bootstrap/scss/bootstrap";）
注意顺序：Sass 的变量重定义必须在 @import "bootstrap/scss/variables" 之前生效；functions 要最先引入，因为 variables 里用了 color-contrast() 等函数。
使用 CSS 自定义属性（CSS Custom Properties）做轻量替换？
Bootstrap 5.3+ 开始为部分颜色提供了 CSS 变量支持（如 --bs-primary），但覆盖范围有限：仅影响 .btn、.badge、.alert 等少数组件的背景/边框，不控制 .text-primary、.border-primary、.link-primary 的颜色值，更不会更新 rgba(var(--bs-primary-rgb), .1) 这类计算值。所以仅靠 CSS 变量无法真正“全局”替换。
- 如果你项目已用 CSS 变量体系，可尝试：
:root { --bs-primary: #2563eb; }，但务必测试所有用到primary的组件，尤其是表单控件（input:focus、checkmark）、进度条、分页等 - 发现失效时，回退到 Sass 方案——这是唯一能 100% 控制所有衍生色和状态的方式
- 不要混用：Sass 编译出的 CSS 里若同时存在
--bs-primary和.btn-primary { background-color: #0d6efd; }，后者优先级更高，CSS 变量被忽略
验证是否改全了：重点检查这些地方
改完别急着上线，手动点开浏览器开发者工具，挨个看以下元素是否真用了新颜色：
-
.btn-primary及其:hover、:active、:disabled状态 -
.form-control:focus的 outline 和 border -
.nav-link.active下划线和文字色 -
.progress-bar.bg-primary的填充色 -
.dropdown-item.active背景和文字色 -
.text-primary在白色/灰色/深色背景下的可读性（尤其检查是否意外继承了旧的$primary-text-emphasis）
最常被忽略的是 $primary-rgb 没同步更新，导致 rgba(var(--bs-primary-rgb), .1) 仍用旧值——这种问题只在悬停、禁用、半透明场景下才暴露，上线后才发现按钮 hover 不变色。
