覆盖 Bootstrap 5 种颜色

Question

我不想覆盖 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>

正如您在 class 中看到的那样，bg-blue 不起作用，但 bg-primary 有效。

Answer 1

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

的集合中

乍一看，似乎所有 .bg- 前缀类都是从 theme colors map. Following the 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);

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

覆盖 Bootstrap 5 种颜色

Override Bootstrap 5 Colors

sass

twitter-bootstrap