改了$primary但按钮仍蓝色，根本原因是构建流程未编译自定义scss：引入的是已编译的bootstrap.min.css，变量已消失；或$primary声明位置错误（在@import之后）、被重复注入、拼写错误；只改css无法覆盖衍生类、悬停态及深色模式适配。
必须重编译 Sass 才能让 $primary 全局生效，直接改 CSS 或用 !important 只能局部“看起来对”，但会漏掉 .text-primary、.border-primary、悬停状态、深色模式适配等关键环节。
为什么改了 $primary 但按钮还是蓝色
常见原因不是变量写错了，而是构建流程根本没走你的自定义文件：
- 你引入的是
bootstrap.min.css（CDN 或dist/目录下），Sass 变量在编译后已消失，改它毫无意义 - 入口 SCSS 文件（如
app.scss）里，$primary: #2563eb;写在了@import "bootstrap/scss/bootstrap";之后——Sass 已按默认值编译完，后写无效 - Webpack/Vite 配置了
additionalData或prependData，导致变量被重复注入，实际生效的是第一个（常是默认值） - 拼写错误：
$Primary、$primary-color、$primary_都不会覆盖原始变量，Sass 会静默使用默认值
$primary 和 $theme-colors 到底该动哪个
两者都影响 .btn-primary，但作用层级不同：
-
$primary是基础色值，$theme-colors默认为("primary": $primary)；只改$primary就够用，且更轻量 - 如果要新增主题色（如
brand），或想保留原始primary含义但另起一套语义，就用map-merge扩展$theme-colors，而不是覆盖它 - 绝对不要写
$theme-colors: ("primary": #2563eb);—— 这会丢掉secondary、success等所有其他键，导致.btn-secondary彻底失效 -
$primary还会影响color-contrast($primary)计算出的文字反色，所以按钮文字自动变白/黑，这是覆盖 CSS 永远做不到的
用 CSS 变量（--bs-primary）覆盖行不行
可以，但有明确边界：
- 仅 Bootstrap 5.2+ 的组件才真正读取
var(--bs-primary)；旧组件（如部分.form-check状态）、第三方扩展（如 Bootstrap Icons）仍硬编码 Sass 值，不响应 - 全局覆盖需加
!important：因为 Bootstrap 默认规则是.btn-primary { --bs-btn-bg: var(--bs-primary); }，而 :root 中的声明权重不够 - 安全做法是作用域化：
body.theme-brand .btn-primary { --bs-primary: #1e40af; }，避免误伤弹窗、表格等第三方组件 - CSS 变量无法替代 Sass 编译期逻辑——比如
lighten($primary, 10%)生成的.bg-primary-subtle背景色，CSS 变量没法动态计算
深色模式下 $primary 为啥没变深
Bootstrap 不会自动为 $primary 生成暗色变体，它只基于单一值推导衍生色（如 $primary-rgb）。要让主色在深色模式下适配：
- 不能只依赖
prefers-color-scheme，得手动定义两套 CSS 变量：:root[data-bs-theme="dark"] { --bs-primary: #4f46e5; } - 若用 Sass，可配合
$color-mode-type+ 自定义 mixin 实现条件编译，但需确保构建工具支持（Dart Sass 2.0+） - 别指望
$primary在深色模式下“自动变暗”——它就是一个静态值，所有明暗逻辑必须显式控制
