必须在@import "bootstrap/scss/variables"之前重定义$primary变量并重新编译sass，否则仅css覆盖会导致.text-primary、.border-primary等语义断裂，悬停态、深色模式均失效。
直接改 $primary 就行，但必须在 @import "bootstrap/scss/variables" 之前
Bootstrap 5 的 “强调色” 不是独立变量，它就是 $primary——所有 .text-primary、.border-primary、.bg-primary 等工具类，以及按钮、警告框、进度条的主色，全靠这个变量驱动。你改它，整套语义色就跟着变。
常见错误是把 $primary: #4a6fa5; 写在 @import "bootstrap/scss/bootstrap" 后面，或者写在 CSS 文件里加 !important。这两种方式都无效：前者被 Sass 编译器忽略，后者只改了按钮背景，漏掉文字色、边框、悬停状态、深色模式适配。
- 变量声明必须放在
@import "bootstrap/scss/functions"之后、@import "bootstrap/scss/variables"之前（functions是variables的依赖，顺序不能错） - 别写
$Primary或$primary-color——Sass 区分大小写，且变量名是固定的 - 如果你还希望链接也同步变色，额外加一行：
$link-color: $primary; -
$primary-rgb不用手动设，Bootstrap 的to-rgb($primary)函数会在编译时自动推导
想加新强调色（比如 navy）？用 map-merge 扩展 $theme-colors
Bootstrap 不允许你直接赋值 $theme-colors: ("navy": #0f766e);——这会清空 primary、success 等所有默认键，导致 .btn-success 消失。
正确做法是保留原 map 并合并新色：
$navy: #0f766e;
$theme-colors: map-merge(
$theme-colors,
("navy": $navy)
);
这段代码也必须放在 @import "bootstrap/scss/variables" 之前，否则 $theme-colors 已被锁定。
- 新增颜色后，必须显式调用
@include theme-colors();（来自bootstrap/scss/utilities/_api.scss），否则不会生成.text-navy、.bg-navy等工具类 - 确保已导入
utilities/api或完整utilities模块，否则@include theme-colors()会报错 - 键名必须是字符串，如
"navy"，不能是变量名navy；也不能带连字符，"deep-navy"可以，"deep navy"会编译失败
为什么改了 $primary，.btn-primary:hover 还是蓝色？
这不是 hover 样式没生效，而是你改的 $primary 没进编译流程——最常见原因是项目实际加载的是 bootstrap.min.css（CDN 或 dist/css/ 下的文件），根本没走 Sass 编译。
确认三件事：
- HTML 中的
<link>必须指向你构建出的 CSS，且构建入口是你写的_custom.scss，不是node_modules/bootstrap/dist/css/bootstrap.min.css - Webpack/Vite 用户检查
sass-loader是否配置了additionalData或prependData——这类配置可能重复注入变量，导致你的声明被覆盖 - 运行
npx sass --version，确保是 Dart Sass（2026 年起强制要求），Node Sass 已废弃且不兼容新函数
如果 DevTools 里看到 .btn-primary:hover 的背景色还是 rgba(13, 110, 253, 0.15)（即默认 $primary 的 rgba 值），说明变量压根没生效。
深色模式下强调色不响应？$primary 本身不自动变暗
Bootstrap 5 默认的 $primary 是一个静态值，不会随 data-bs-theme="dark" 或系统偏好自动调整亮度。如果你希望深色模式下 .text-primary 文字更清晰、.bg-primary 背景不刺眼，得手动干预。
有两种路径：
- 简单方案：在
:root和@media (prefers-color-scheme: dark)中重设 CSS 自定义属性，如--bs-primary-text-emphasis、--bs-primary-bg-subtle——但注意这些变量仅在 Bootstrap 5.3+ 支持 - 可靠方案：用 Sass 定义两套
$primary，配合$color-mode-type和自定义color-mode规则生成响应式色值（需手写逻辑，Bootstrap 不提供开箱即用的深色强调色映射）
最容易被忽略的一点：即使你只改浅色模式下的 $primary，也得同步检查 $primary-text-emphasis、$primary-bg-subtle 等衍生变量是否仍满足 WCAG 对比度要求——它们由 $primary 推导而来，但推导逻辑未必适配你的新色值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
