Question

为了便于参考，我将按照以下说明创建新的主题颜色，以便可以使用bg-red代替bg-danger或text-purple，依此类推。

$primary        : #24305e;
$blue           : #375abb;
$indigo         : #796eff;
$purple         : #6f42c1;
$pink           : #e83e8c;
$red            : #db4446;
$orange         : #e3240C;
$yellow         : #ffc107;
$green          : #21c87a;
$teal           : #2e9cca;
$cyan           : #17a2b8;
$light          : #f6f9fc;

$theme-colors   : (
    "blue"      : $blue,
    "indigo"    : $indigo,
    "purple"    : $purple,
    "pink"      : $pink,
    "red"       : $red,
    "orange"    : $orange,
    "yellow"    : $yellow,
    "green"     : $green,
    "teal"      : $teal,
    "cyan"      : $cyan    
);

@import "node_modules/bootstrap/scss/bootstrap";

但是，我想知道这是否是正确的方法，因为我注意到我有重复的:root可变颜色。请参考所附图片。

我在这里想念东西吗？

Answer 1

这是因为CSS变量是根据$colors: ()映射创建的，而不是根据$theme-colors:()映射创建的。

您将通过使用相同的颜色名称来覆盖已经创建的CSS变量。如果是这样，例如在

$theme-colors:( 'vermilion':$red, )

在root:中，您将同时看到--vermilion:和--red:

更新：与在普通.css文件中执行的操作相同：

:root {
    --red: #222222;
    --red: #333333;
}

--red: #222222;将被越过，浏览器将使用第二个--red: #333333;

Answer 2

Bootstrap为$colors和$theme-colors映射定义css变量。由于默认的$colors映射还包含许多您定义为$theme-colors的颜色，例如blue，indigo，purple等，因此将有两次输出相关的CSS变量。

默认的$colors映射定义为（v4.5.2）：

  (
    "blue":       $blue,
    "indigo":     $indigo,
    "purple":     $purple,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "white":      $white,
    "gray":       $gray-600,
    "gray-dark":  $gray-800
  )

只要您在$colors和$theme-colors中为相同的名称使用相同的颜色值，或者只要您设置{ {1}}映射将与默认$theme-colors中的任何键匹配的映射到相同的变量。因此，就您而言，一切都很正常，根本无需担心。*

例如，如果您想将$colors设置为与$blue中的"blue"项目不同的值，那么您会遇到问题。在这种情况下，您需要在$theme-colors地图中使用其他名称，例如$theme-colors或类似的内容。

您可能会发现这些CSS变量的双重存在很烦人，但我想是这样的，如果由于偶然之间的相互作用，如果您偶然地覆盖了自己的一种颜色，则

颜色名称变量（例如"blue2"）
默认的$blue映射（其中包含一个colors()声明，并导致默认添加一个"blue": $blue css变量）和
--blue映射（可以对其进行自定义，使其也包含具有键$theme-colors的项，并且还将创建一个"blue":... css变量）。

不过滤掉这些潜在的重复声明可以为您调试问题提供一个起点。否则，仅通过查看浏览器中的样式可能很难确定正在发生的事情。

*：请注意，每种主题颜色都会在最终的CSS中增加一些大小，因此最好仅包含那些确实需要的大小。

更改Bootstrap主题颜色

2 个答案: