必须在@import前重定义$primary变量并重新编译Sass，否则仅CSS覆盖会导致语义断裂、状态不一致和深色模式失效；正确做法是严格按顺序声明变量、导入模块，并用map-merge扩展主题色。
必须重定义 $primary 变量并重新编译 Sass，否则任何 CSS 层叠覆盖都只是表面生效，且必然漏掉状态、工具类和组件联动。
为什么直接改 .btn-primary 是错的
你加一句 .btn-primary { background-color: #ff6b35 !important; } 看似按钮变色了，但实际会立刻暴露三个问题：
-
.text-primary、.border-primary、.bg-primary仍是默认蓝色，语义断裂 -
.btn-primary:hover和.btn-primary:disabled仍用原始 $primary 计算出的颜色，悬停后变蓝、禁用后变灰，视觉不一致 - 深色模式下完全无响应，
data-bs-theme="dark"不会自动适配你硬写的颜色
正确姿势：在 @import 前重定义 $primary
新建一个 _custom.scss（或你的主入口 SCSS 文件），确保顺序严格如下：
$primary: #2563eb; @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; // ……其余模块按需导入
关键点：
- 变量声明必须在
@import "bootstrap/scss/variables"之前，否则会被默认值覆盖 - 不要写
$Primary或$primary-color—— Sass 区分大小写且变量名固定 - 如果你同时想让链接也同步变色，额外加一行：
$link-color: $primary; - 不用手动设
$primary-rgb，Bootstrap 的to-rgb()函数会在编译时自动推导
扩展主题色要用 map-merge，别全量重写 $theme-colors
想加个 brand 色或微调 warning，别直接赋值 $theme-colors: ("brand": #2563eb);——这会清空 primary、secondary 等所有默认键。
正确做法是：
$brand: #2563eb;
$theme-colors: map-merge(
$theme-colors,
(
"brand": $brand,
"warning": #d97706
)
);
这样既保留了原有主题色，又能生成 .text-brand、.btn-outline-brand 等全套工具类。注意：这段代码也必须放在 @import "bootstrap/scss/maps" 之前。
构建失败或颜色没变？先查这三件事
常见卡点就这几个：
- 你用的是
bootstrap.min.css（CDN 或dist/目录下的）？那 Sass 变量修改完全无效，必须切到源码路径node_modules/bootstrap/scss/ - Webpack/Vite 配置里用了
additionalData或prependData？它可能把默认变量又注入了一遍，导致你的声明被覆盖 - 运行
npx sass --version确认是 Dart Sass（Bootstrap 5 要求），Node Sass 已不兼容
真正生效的标志不是按钮变色，而是打开编译后的 CSS 文件，搜索 text-primary，看它的 color 值是否已变成你设的十六进制，且所有 bg-、border-、shadow- 类都同步更新了——这才是变量驱动的完整证据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
