改 $primary 能换主色调，但必须在 Bootstrap 4 Sass 编译流程中最早生效，否则 .btn-primary 等仍为默认蓝色；常见原因是加载了预编译 CSS 而非自定义编译文件，或变量声明顺序错误、未正确合并 $theme-colors、缺乏深色模式手动适配。
直接改 $primary 就能换主色调，但必须确保它在 Bootstrap 4 的 Sass 编译流程中「最早生效」；否则所有 .btn-primary、.text-primary 都还是默认蓝色。
为什么改了 $primary 但按钮还是蓝色
最常见原因是编译没走对路径——你改的是 Sass 变量，但项目实际加载的是已编译好的 bootstrap.min.css（比如通过 CDN 或 dist/css/ 引入）。Sass 变量只在源码编译阶段起作用，运行时 CSS 文件里根本不存在 $primary 这个东西。
- 检查 HTML 中的
<link>：是否指向你自己构建出的 CSS？而不是https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css - 确认构建入口文件（如
custom.scss）确实@import "bootstrap/scss/bootstrap"，且没漏掉functions和variables - 变量声明顺序错乱：必须在
@import "bootstrap/scss/variables"之前写$primary: #2563eb;，放后面等于白写
$primary 改了，但 .text-primary 颜色不对或看不清
Bootstrap 4 不像 5.3+ 那样有 color-contrast() 动态计算文字色。.text-primary 是固定用 darken($primary, 10%) 算出来的，如果你换了个高饱和亮色（比如 #ff6b35），darken() 一压可能直接发黑或糊成一片。
- 别依赖默认暗化逻辑，手动覆盖：
$primary-text: #1a1a1a;（需确认你的 Bootstrap 4 版本支持该变量；4.6+ 可用，旧版需补全） - 或者同步改
$primary-dark和$primary-light，再在 CSS 里用color: $primary-dark;显式控制 - 小字号文本慎用
.text-primary+ 浅背景组合，WCAG AA 对比度很容易不达标
新增颜色（如 navy）后 .btn-navy 不生效
Bootstrap 4 的工具类（.btn-*、.bg-*、.text-*）靠 $theme-colors 这个 map 生成。只定义 $navy: #0f766e; 不够，它不会自动进 map，也不会触发类生成。
- 必须重写整个
$theme-colors，并用map-merge()合并：$theme-colors: map-merge($theme-colors, ("navy": $navy)); - 不能直接赋值：
$theme-colors: ("primary": $primary, "navy": $navy);—— 这会丢掉secondary、success等所有默认色 - 确保
@import "bootstrap/scss/utilities"已加载，否则theme-colors()mixin 不可用，新类名不会输出
深色模式下 .text-primary 没变亮，是设计如此
Bootstrap 4 原生不支持 prefers-color-scheme 响应式主题切换。.text-primary 就是一个静态色值，data-bs-theme 属性在 4.x 里还不存在。所谓“深色模式适配”必须手动加媒体查询或 JS 切换 class。
- 别给
.text-primary写@media (prefers-color-scheme: dark) { color: #fff; }—— 它没预留钩子，且破坏变量系统一致性 - 更稳妥的做法是弃用语义类，改用自定义类名（如
.brand-text），并在 SCSS 中按 scheme 分支定义：.brand-text { color: $primary; @media (prefers-color-scheme: dark) { color: $primary-light; } } - 所有依赖
$primary的组件（alert、progress、form-range）都不会自动响应深色模式，得逐个处理
真正卡住人的地方往往不是怎么写变量，而是构建链路是否完整：Sass 入口文件 → 正确 import 顺序 → Dart Sass 编译器 → 输出 CSS 被页面加载。漏掉任意一环，$primary 就只是个注释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
