bootstrap 4 不支持 css 自定义变量，必须用 sass 变量 $primary 并在 @import "bootstrap/scss/variables" 前声明，否则无效；cdn 引入时只能用 !important 覆盖，但状态、深色模式等无法自动适配。

Bootstrap 4 不支持运行时 CSS 自定义变量（即 --bs-primary 这类），它用的是 Sass 变量（$primary），所以直接在 :root 里写 --primary: #xxx 完全无效——浏览器根本不会读，Bootstrap 4 的 CSS 文件里压根没引用任何 CSS 变量。

为什么改 :root 里的 --primary 没反应

常见现象：开发者工具里看到 --primary 值变了，但 .btn-primary 还是蓝色；或者整行变量被标为 “invalid”。

• Bootstrap 4 的编译产物是纯 CSS，所有颜色、间距、断点都已转成固定值（比如 background-color: #007bff），不依赖运行时 CSS 变量
• --primary 这种写法本身就不在 Bootstrap 4 的命名规范里——它只认 $primary 这类 Sass 变量
• 即使你手动加了 :root { --primary: #xxx }，也没任何样式规则在 var(--primary)，等于写了白写

必须用 Sass 重定义 $primary 等变量

这是唯一可靠方式，且必须满足加载顺序和语法约束：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 变量赋值必须出现在 @import "bootstrap/scss/variables" 之前，不能加 !default
• 入口 SCSS 文件（如 main.scss）要按严格顺序写：

  $primary: #2563eb;
  $secondary: #6c757d;
  @import "bootstrap/scss/functions";
  @import "bootstrap/scss/variables";
  @import "bootstrap/scss/mixins";
  @import "bootstrap/scss/bootstrap";

• 只覆盖需要的变量即可，未声明的仍沿用默认值（如 $font-size-base 不改，就还是 1rem）
• 若扩展了 $theme-colors 映射（如加了 "brand": #2c3e50），必须在 @import "bootstrap/scss/variables" 之后、@import "bootstrap/scss/bootstrap" 之前插入 map-merge 调用，否则 .bg-brand 类不会生成

CDN 引入时还能自定义主题吗

不能用 Sass，但可以退而求其次用 CSS 覆盖：

• 把自定义 CSS 文件（如 custom.css）放在 bootstrap.min.css 之后加载
• 用更高权重的选择器强行覆盖，例如：

  .btn-primary {
    background-color: #2563eb !important;
  }
  .btn-primary:hover {
    background-color: #1d4ed8 !important;
  }
  .text-primary {
    color: #2563eb !important;
  }

• 缺点明显：悬停色、禁用态、边框、文字对比度等都不会自动适配，得一个个补；!important 积累多了后期难维护
• 深色模式下更麻烦——CSS 覆盖无法响应 data-bs-theme="dark" 切换

真正想统一控制主题，就得放弃 CDN，走 Sass 编译流程。漏掉 @import 顺序或误用 !default 是最常卡住的地方，不是变量没生效，是根本没进编译链。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！