需在编译前重定义 Sass 变量：新建 _custom.scss，先赋值 $primary: #2563eb;，再按序导入 functions、variables 等；若用 CDN 或未正确引入自定义文件，则修改无效。
怎么改 $primary 这类 Sass 变量值
bootstrap 5 的颜色系统基于 sass 变量，不是靠 css 覆盖就能生效的。必须在编译前重定义变量，否则 .btn-primary 用的还是原始 $primary 值。
实操上，你得自己建一个 _custom.scss（或类似名字），在引入 Bootstrap 源码前，先覆盖变量：
// _custom.scss $primary: #2563eb; // 替换成你的主色 $success: #10b981; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ……其余模块按需导入
- 顺序不能错：变量重定义 →
@import functions→@import variables→ 其他 - 只重定义你需要改的变量，其他留默认；
$theme-colors是个 map，如果要加新色（比如purple），得整个 map 重写 - 别直接改
node_modules/bootstrap/scss/_variables.scss—— 升级就丢了
为什么改了变量但按钮颜色没变
常见原因是编译流程没走对：用的是 CDN 或 precompiled CSS，根本没进 Sass 编译环节。
检查你项目里实际加载的 CSS 文件来源：
- 用了
bootstrap.min.css（CDN 或 dist 目录下）→ 改 Sass 变量完全无效 - 用了 Webpack/Vite 构建，但入口 SCSS 没 import 你自定义的文件 → 变量没被读到
- 变量名拼错了，比如写成
$Primary或$primary-color→ Sass 不报错但不生效（它会用默认值） - 某些组件（如
.alert）同时依赖$primary和$theme-colors，只改前者可能不够，得确认上下文用的是哪个
$theme-colors 和单个变量（如 $primary）什么关系
$primary 是基础变量，$theme-colors 是一个 map，里面 key 是 primary、success 等，value 默认引用这些基础变量。所以改 $primary 会影响所有用到 primary 主题色的地方，但不会自动更新 $theme-colors 里的 primary 键——除非你没动过 $theme-colors，它默认就是 (primary: $primary, success: $success, ...)。
如果你想新增一个主题色 navy，就得显式重写整个 map：
$theme-colors: ( primary: $primary, success: $success, navy: #1e3a8a );
- 一旦重写
$theme-colors，就必须包含所有你想保留的键，否则像danger就会消失 -
$primary本身仍可用于非主题类场景（比如自定义 mixin 里），和$theme-colors是两套逻辑 - Bootstrap 5.3+ 开始支持 CSS 自定义属性（
--bs-primary），但仅限部分组件，且不替代 Sass 编译流程
用 CSS 自定义属性临时覆盖行不行
可以，但有明显边界：只对明确支持 CSS 变量的组件有效，比如 .btn、.alert 在 Bootstrap 5.3+ 中读取 --bs-primary，但 .navbar 背景、.list-group-item 悬停色等很多地方依然硬编码 Sass 颜色值。
示例（仅对部分组件起效）：
:root {
--bs-primary: #8b5cf6;
--bs-success: #34d399;
}
- 这个方式适合快速预览或微调，不适合生产环境的颜色体系重构
- 浏览器兼容性没问题（Chrome 49+/Firefox 31+），但 IE 完全不支持
- 如果同时用了 Sass 编译 + CSS 变量，优先级是：CSS 变量 > Sass 编译结果（仅限支持它的组件）
