我一直在玩 Bootstrap 的全新 5.0.1。
在官方文档中，他们说他们在编译的CSS中使用CSS变量。
对我来说，我可以在运行时覆盖某些颜色。例如，我想要 e。 g。整个“主要”主题使用红色而不是默认的蓝色。
看这个非常简单的示例。什么也没发生。徽章和按钮仍然是蓝色的。
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
:root{--bs-primary: red;}
</style>
</head>
<body>
<div class="badge bg-primary">100</div>
<button class="btn btn-primary">Just a button</div>
</body>
</html>
大家觉得怎么样？我做错了什么吗？或者 Bootstrap 团队还没有准备好为每个组件提供 CSS 变量？
重要提示：我知道我可以使用 SASS 在编译时从蓝色切换到红色。但我需要一个解决方案，让我在运行时期间更改颜色，因为我根本不知道编译时所需的颜色。
更新 05/16/2021：此时我想知道的是 Bootstrap 团队是否仍在致力于将 CSS 变量添加到 compiled css（可能在 v5.x.x 中） - 或者如果我误解了整个事情？谢谢你们。
更新 05/17/2021：修改徽章非常简单，正如@Sameer 在下面向我们展示的那样。然而，修改按钮并不是那么简单。所以我在我的示例中添加了一个按钮。
更新 05/18/2021： 对于任何感兴趣的人，我在 Bootstrap 社区论坛上开了一个帖子。
所以你不能通过更改 bootstrap CSS 变量来覆盖 CSS，我认为他们添加了 CSS 变量来允许我们设计自己的元素样式。
一种方法是手动覆盖
.bg-primary {
background-color: var(--bs-primary) !important;
}
但是如果您使用SASS，那么更改主题和颜色很容易。
更新：
有人已经请求了这个
（参见这里），但是引导团队由于各种原因不想实现这个，比如对旧浏览器的支持，没有计划重新架构所有代码库来做到这一点，等等。
this有用。
Hermanya 用户更改了 Bootstrap CSS 的输出以使用 CSS 变量，因此在运行时我们可以更改颜色。
这是codepen 演示
这是一篇关于他如何做到这一点的
文章。
他还发布了
cdn链接
虽然它可能有效，但是每次 bootstrap 更新时你都必须一次又一次地这样做。
.bg-primary {
background-color: var(--bs-primary) !important;
}
例如类 img-thumbnail 有
border-radius: var(--bs-border-radius);
test-img-class {
--bs-border-radius : 20px
}
可能想确保班级优先级。
<img src="..." className="img-thumbnail test-img-class" />