如何从CDN加载Bootstrap 4时禁用或重写其颜色主题？

当你用CDN加载编译好的Bootstrap 4 CSS时，确实没法直接修改SCSS变量（这些变量只在编译阶段生效，CDN提供的是最终生成的CSS文件），不过有几种优雅的方法，既不用本地加载Bootstrap，也不用逐个覆盖类就能修改主题颜色：

方法1：利用Bootstrap 4.3+的CSS自定义属性（推荐） #

从Bootstrap 4.3版本开始，框架引入了CSS自定义属性（变量），你可以直接在:root伪类中重定义这些变量，所有依赖这些变量的组件会自动同步更新样式。比如要把primary主题色改成红色，只需要添加这段CSS：

:root {
  --primary: #dc3545; /* 这里用Bootstrap自带的danger红色，也可以换成你想要的任意颜色值 */
}

这样不仅btn-primary会变成红色，所有使用primary主题色的组件（比如导航栏、徽章、进度条等）都会同步更新，完全不用逐个修改元素类。

方法2：自定义主题类（兼容所有Bootstrap 4版本） #

如果你的Bootstrap版本低于4.3，没有CSS变量支持，可以通过给根元素（比如<body>）添加自定义类，用更高优先级的选择器批量覆盖Bootstrap样式：

1. 先给<body>添加自定义类：

<body class="custom-red-theme">

2. 然后添加这段CSS：

/* 基础primary按钮样式 */
.custom-red-theme .btn-primary {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

/* hover状态 */
.custom-red-theme .btn-primary:hover {
  background-color: #c82333;
  border-color: #bd2130;
}

/* focus/active状态 */
.custom-red-theme .btn-primary:focus,
.custom-red-theme .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

/* 可按需添加其他状态，比如active、disabled等 */

这种方法把所有主题修改集中在一个类下，样式优先级比Bootstrap默认类高，还能方便切换不同主题。

方法3：使用!important（不推荐） #

如果只是快速测试或简单修改，也可以用!important强制覆盖样式，但这种方法会破坏CSS优先级规则，可能导致后续样式调试困难，所以尽量避免：

.btn-primary {
  background-color: red !important;
  border-color: red !important;
}

.btn-primary:hover {
  background-color: darkred !important;
  border-color: darkred !important;
}

为什么SCSS变量方法无效？ #

你提到的map-remove或者修改$primary变量的方法，只有在本地编译Bootstrap SCSS源码时才有效——这些变量是在编译过程中替换成具体颜色值的。CDN加载的是已经编译好的CSS文件，SCSS变量已经不存在了，所以这些方法对CDN版本完全不起作用。

内容的提问来源于stack exchange，提问作者Ben