如何用内部CSS覆盖Bootstrap 4默认主色并全局生效？

这问题我之前踩过好几次坑！直接写.btn-primary { background-color: red; }确实只能覆盖按钮的基础状态，Bootstrap的所有primary相关组件（包括hover/active/disabled状态、alert、text、背景色这些）都是基于底层变量生成的，得从根上改才管用，给你两种靠谱的方案：

方案一：纯CSS变量覆盖（无需编译，快速生效） #

Bootstrap 5及以上版本已经全面使用CSS自定义属性（变量），你只需要在Bootstrap样式表之后，重新定义:root里的primary相关变量，所有依赖这些变量的组件会自动更新：

/* 必须放在Bootstrap的<link>标签之后！ */
:root {
  --bs-primary: #ff0000; /* 你的自定义红色 */
  /* 可选：自定义各状态的颜色，和Bootstrap默认逻辑一致 */
  --bs-primary-hover: #cc0000; /* hover状态稍深的红色 */
  --bs-primary-active: #990000; /* active状态更深的红色 */
  --bs-primary-disabled: #ff6666; /* disabled状态的浅红色 */
}

这样改完之后，.btn-primary的所有状态、.alert-primary、.text-primary、.bg-primary、.btn-outline-primary、.badge-primary这些类都会自动用上你的新颜色，不用再一个个写覆盖样式。

方案二：Sass预编译（适合工程化项目） #

如果你的项目用了Webpack、Vite这类构建工具，用Sass修改Bootstrap的原生变量是最规范的方式，能生成完全定制化的Bootstrap样式，没有冗余的覆盖代码：

1. 确保安装了Bootstrap的Sass版本：

npm install bootstrap@latest

2. 创建一个自定义的Sass文件（比如custom-bootstrap.scss），先定义你的变量，再引入Bootstrap：

// 自定义primary主色
$primary: #ff0000;
// 可选：自定义各状态的颜色，Bootstrap会自动用这些生成对应样式
$primary-hover: darken($primary, 10%);
$primary-active: darken($primary, 20%);
$primary-disabled: lighten($primary, 20%);

// 引入Bootstrap的Sass入口文件
@import "bootstrap/scss/bootstrap";

3. 在项目的主入口文件（比如main.js或者index.html）里引入这个自定义的Sass文件，代替直接引入Bootstrap的CSS文件。

编译之后，生成的Bootstrap样式会完全基于你的自定义变量，所有组件的所有状态都能完美适配新颜色，这也是Bootstrap官方推荐的定制方式。

为啥直接覆盖单个类不行？ #

因为Bootstrap的组件样式（比如.btn-primary:hover）是通过变量或Sass混合器生成的，它们的CSS优先级可能比你写的自定义样式高，而且要覆盖所有关联类（alert、text、outline按钮等等）和所有状态，工作量巨大还容易遗漏，从变量入手才是一劳永逸的办法。

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