覆盖 Bootstrap 5 种颜色答案

【问题标题】：Override Bootstrap 5 Colors覆盖 Bootstrap 5 种颜色
【发布时间】：2022-01-07 17:01:05
【问题描述】：

我不想覆盖 Bootstrap SASS 中的 $blue 变量。 $primary 和 $secondary 正在工作，但不是 $blue, $teal, $orange 和其他不是主题颜色的其他颜色。这是我的 SASS 文件：

// COLORS
$primary: #D91473;
$secondary: #2E3092;
$blue: #349DD6;
$teal: #309C9E;


@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';

// Bootstrap Main
@import '../../node_modules/bootstrap/scss/bootstrap';

我的标记很简单：

<div class="container-fluid bg-blue">
     <p>test</p>
</div>

正如您在课堂上看到的那样，它是 bg-blue，它不起作用，但 bg-primary 起作用。

【问题讨论】：

看起来bg-blue 类在引导程序中的任何地方都不存在。您的覆盖实际上可能正在工作，您可以通过在您自己的类中直接使用 $blue 变量来测试它是否有效。

标签： twitter-bootstrap sass

【解决方案1】：

.bg-blue is not a utility class that is generated by Bootstrap。因此，虽然您可能成功地覆盖了 $blue 颜色，但您并没有改变它是否包含在用于生成 .bg- 类的集合中。

乍一看，似乎所有.bg- 前缀的类都是从theme colors map 生成的。在section of the docs that describes how to add to this map 之后，您可能想要执行以下操作：

// Create your own map
$custom-colors: (
  "blue": $blue
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

请注意，这意味着蓝色现在是主题颜色集合的一部分，并将通过该集合所经过的所有处理运行，因此您可能会发现它添加了额外的实用程序类没想到或有其他副作用。相反，您可能能够找到一种方法来插入生成背景颜色的过程，这将是一种更精确的操作，但实现起来可能更复杂。

【讨论】：

我明白了，谢谢你的澄清。因此，为了安全起见，我通过在单独的 sass 文件中声明 .bg-blue { background-color: $blue } 为 bg-blue 创建了自己的实用程序类。