应直接修改 sass 变量 $primary 并重新编译，而非覆盖 css 类；它会自动推导 $primary-rgb 等衍生色，并联动更新按钮、警告、进度条等所有依赖主色的组件及状态样式。
直接改 $primary 变量再编译，别动 CSS 文件
Bootstrap 5 的主题色不是靠覆盖 CSS 类生效的，而是通过 Sass 变量控制。你改 primary 类的样式（比如 .btn-primary）只能局部生效，按钮、表单控件、进度条、徽章等所有用到主色的地方，底层都依赖 $primary 这个变量。所以必须从变量源头改。
常见错误是直接在 style.css 里加 .btn-primary { background-color: #ff6b35 !important; } —— 这样能“看起来”变了，但 .bg-primary、.border-primary、.text-primary 还是旧色，而且暗色模式、伪类状态（如 :hover）容易漏掉或不一致。
- 确保你用的是 Bootstrap 源码（
node_modules/bootstrap/scss/），不是仅引入了bootstrap.min.css - 新建一个
_custom.scss，在它里面重定义$primary，再@import "bootstrap/scss/bootstrap" - 顺序不能错：变量重定义必须在
@import任何 Bootstrap SCSS 文件之前
$primary 影响哪些颜色和组件
改了 $primary 不只改按钮，它会自动推导出一整套辅助色：$primary-rgb、$primary-text-emphasis、$primary-bg-subtle、$primary-border-subtle，这些被用于文字强调、背景色块、边框等。组件层面，.btn-primary、.alert-primary、.progress-bar（当 class="bg-primary"）、.list-group-item-primary 全部联动更新。
注意：某些颜色（比如 $link-color）默认不等于 $primary，它独立取值为 $blue；如果你希望链接也同步变色，得额外重写 $link-color: $primary;
-
$primary是唯一需要手动设的入口变量，其余衍生色由 Bootstrap 自动计算 - 如果用了
bootstrap/scss/functions或mixins，它们内部也依赖$primary值，所以改它是安全且可预期的 - 深色模式下，
$primary默认不自动变深，需配合$color-mode-type和自定义color-mode规则才能响应
用 npm run build 编译时没生效？检查三件事
改完变量却还是蓝色，大概率是构建流程跳过了你的自定义文件，或者变量被后加载的文件覆盖了。
- 确认你的入口 SCSS 文件（如
app.scss）第一行就是$primary: #4a6fa5;，后面紧跟着@import "bootstrap/scss/bootstrap"; - 检查 Webpack/Vite 的 Sass 加载器有没有启用
additionalData或prependData—— 如果用了这类配置，变量可能被重复注入，导致冲突 - 运行
npx sass --version确保是 Dart Sass（Bootstrap 5 要求），Node Sass 已废弃且不兼容新函数
不想编译？用 CSS 自定义属性临时覆盖（有限但快）
开发调试或小项目想绕过编译，可以用 CSS 变量强行覆盖，但只适用于部分场景：
Bootstrap 5 把 $primary 映射到了 CSS 变量 --bs-primary，所以你可以：
:root {
--bs-primary: #2d7d46;
}
这能让 .btn-primary、.text-primary 等立即变色。但注意：.bg-primary 的背景色是直接用 var(--bs-primary)，而 .btn-primary:hover 的暗化逻辑是通过 Sass 函数生成的固定值（如 darken($primary, 10%)），CSS 变量无法动态参与这个计算 —— 所以悬停色不会跟着变，会显得不协调。
真正要稳定、全链路一致，还是得走 Sass 变量 + 编译这条路。临时方案只适合快速验证或原型阶段。
最常被忽略的是：改了 $primary 后，$theme-colors 这个 map 里的 primary 键值是否还指向它 —— 默认是的，但如果你重写了整个 $theme-colors，就得手动把 primary 对应的值同步过去，否则 .text-primary 就失效了。
