Bootstrap 4 引导：设置自定义颜色

我正在项目中使用

bootstrap4.0.0

。我知道bootstrap定义了一些变量，比如

--primary

来定义按钮的颜色（在本例中是

.btn primary

）。相反，我想有我的自定义颜色。 但是，我没有设置另一种“主要”颜色，甚至在

bootstrap.css的
标记之前或之后的
文件中插入以下代码片段

<style>
  :root {
     --primary: #009c68;
  }
</style>


：根{
--初级：#009c68；
}
Hey Jdias
我在看你的问题

到目前为止，我可以看出原因是非常明显的。Bootstrap最初是用SCSS编写的，因此当它被编译成CSS时，它实际上使用的是颜色代码，而不是CSS中的var（--primary）

bootstrap css文件中的代码是（源代码是bootstrap的GIT REPO）：
而不是
如果要自定义此选项，则必须下载文件而不是CDN，然后编辑SCS并编译它

希望我能提供帮助。
您可以通过添加“！important；”来覆盖引导样式
例如，在html中，您可能有如下内容：

<button type="button" class="btn btn-primary">Primary</button>

Primary

您可以按如下方式更改颜色：

<button type="button" class="btn" style="background-color: #009c68!important;">Primary</button>

Primary

在CSS中！重要意味着“这很重要”，忽略所有后续规则，然后应用！重要规则。有关更多信息，请访问

如果这个答案不适用于您给定的情况，我建议您研究引导主题。可以找到解释如何自定义引导4和修改现有颜色的文档。
将
:root
像
--primary
想象成只读的。它们可以引用为

背景色：var（--primary）

但是，尝试更改
--primary
的原始值将无效：

:root {
     --primary: #009c68;
}

这没有效果，因为引导的CSS是从SASS变量编译的

要更改/覆盖btn primary的颜色，您应该看到以下问题：



我创建了一个具有该颜色的类，我将其添加到按钮btn primary。。。
<button type="button" class="btn" style="background-color: #009c68!important;">Primary</button>

:root {
     --primary: #009c68;
}