使用CDN引入Bootstrap 5时，如何覆盖根CSS变量？

你遇到的问题核心原因是：CDN提供的预编译Bootstrap CSS文件，已经把组件专属的CSS变量（比如按钮的--bs-btn-bg）硬编码成了具体颜色值，而非引用根变量--bs-primary。

举个实际例子，打开CDN的bootstrap.min.css查看.btn-primary的样式，会看到它的背景色变量是写死的--bs-btn-bg:#0d6efd，而不是--bs-btn-bg:var(--bs-primary)。所以你修改根节点的--bs-primary，根本影响不到按钮样式——因为按钮的样式代码里完全没用到这个根变量。

解决办法 #

有两个实用方案可选：

• 方案一：直接覆盖组件专属变量
  如果你只需要修改特定组件的样式，直接针对组件类修改它的专属变量即可，比如修改.btn-primary：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" />

<style>
.btn-primary {
  --bs-btn-bg: red;
  --bs-btn-border-color: red;
  --bs-btn-hover-bg: darkred;
  --bs-btn-hover-border-color: darkred;
}
</style>

<button class="btn btn-primary">
  现在我是红色的了
</button>

• 方案二：用SASS自定义编译Bootstrap
  如果你想全局替换所有用到primary色的组件，最优方式是使用Bootstrap的SASS源文件，修改$primary变量后自行编译CSS。比如在你的SASS文件中：

$primary: red;
@import "bootstrap";

编译完成后引入自己生成的CSS文件，所有依赖$primary的组件样式都会自动替换为红色。

你之前尝试的把变量声明放在CDN链接上方、加!important都无效，原因也很明确：预编译CSS里的组件变量是类级别的，优先级高于根变量，而且根本没有引用根变量，所以修改根变量自然不会产生任何效果。

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