直接改 .btn-primary 的 CSS 会漏掉 :hover、:focus、:disabled、:active 状态样式，且不联动 .alert-primary 等语义组件；唯一可靠方式是重定义 Sass 变量 $primary 并确保编译流程正确。
直接改 .btn-primary 的 CSS 会漏掉哪些状态
只写 .btn-primary { background-color: #ff6b35; }，按钮在 :hover、:focus、:disabled、:active 下颜色还是默认蓝色，文字反色（比如悬停时文字变白）和边框也不同步。更隐蔽的问题是：.alert-primary、.border-primary、.text-primary 全部保持原样，语义断裂。
常见错误现象：开发者工具里看到按钮背景变了，但鼠标移上去又变回蓝，或者禁用后颜色灰得不协调。
- 按钮的
border-color和color不会自动适配新背景，需手动补全 -
.btn-outline-primary完全不受影响，因为它的样式依赖--bs-btn-outline-border-color等 CSS 变量，而非.btn-primary类 - 暗色模式下，这些硬写死的值不会响应切换，容易出现文字不可读
用 Sass 变量 $primary 重定义才是唯一可靠方式
Bootstrap 5+ 所有 primary 相关样式都从 $primary 派生而来——包括 $primary-rgb、$primary-text-emphasis、$primary-bg-subtle，以及 button-variant() mixin 内部调用的全部逻辑。改它，所有组件一次性同步更新。
实操要点：
- 新建一个入口 SCSS 文件（如
app.scss），第一行就写$primary: #4a6fa5; - 紧跟着写
@import "bootstrap/scss/bootstrap";，顺序不能颠倒 - 确保构建工具加载的是这个文件，而不是直接引入
bootstrap.min.css - 如果用了 Vite 或 Webpack，检查
sass加载器有没有配置additionalData，否则变量可能被覆盖或忽略
为什么不用 CSS 自定义属性（--bs-primary）
Bootstrap 5.3+ 虽然暴露了部分 CSS 变量（如 --bs-btn-bg），但 $primary 本身不是运行时变量，它只在 Sass 编译期起作用。你设 :root { --bs-primary: #ff6b35; } 对 .btn-primary 完全无效——因为该类的 background-color 是编译时写死的 map-get($theme-colors, "primary") 结果，不引用任何 CSS 变量。
例外情况：
-
.btn-outline-primary确实读--bs-btn-outline-border-color，但改它只影响轮廓按钮，不影响实心按钮 - 如果你只改按钮，不关心
.alert或.badge，那可以单独用.btn.btn-purple+ 自定义 CSS 变量组合，但必须自己手写全部状态 - 想让整套主题响应暗色模式？CSS 变量方案需要配合
@media (prefers-color-scheme: dark)手动重设，而 Sass 方案仍需额外定义color-mode规则
构建后颜色没变？优先排查这三处
改了 $primary 却还是蓝色，不是变量没生效，就是构建流程绕过了你的修改。
- 确认
node_modules/bootstrap/scss/存在，且你 import 的是完整路径，不是已编译的 CSS - 运行
npx sass --version，输出必须是 Dart Sass（≥1.70），Node Sass 已废弃且无法解析 Bootstrap 5 的新函数 - 检查是否有多个
@import链路——比如bootstrap/scss/_buttons.scss被其他文件提前加载，导致你的$primary声明晚于它
最易被忽略的一点：$primary 改了，但 $link-color 默认仍是 $blue，所以链接不会变色；如需统一，得额外加一行 $link-color: $primary;。
