Css 更改引导主题颜色

为了便于参考，我正在根据以下内容创建新的主题颜色，这样我就可以使用

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

变量颜色。请参考所附图片

---

我在这里遗漏了什么吗？

这是因为CSS变量是从

$colors:（）

map创建的，而不是从

$theme colors:（）

map创建的

您正在使用相同的颜色名称覆盖已创建的CSS变量。 例如，如果你在

$主题颜色：（‘朱红’：$红色，）

在

root:

中，您将看到

--朱砂：

和

--红色：

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

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

---

——红色：#22222将被划掉，浏览器将使用第二个<代码>--红色：#333333
这是因为CSS变量是从
$colors:（）
map创建的，而不是从
$theme colors:（）
map创建的

您正在使用相同的颜色名称覆盖已创建的CSS变量。
例如，如果你在

$主题颜色：（‘朱红’：$红色，）

在
root:
中，您将看到
--朱砂：
和
--红色：

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

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

——红色：#22222将被划掉，浏览器将使用第二个<代码>--红色：#333333
引导为
$colors
和
$theme colors
映射定义css变量。由于默认的
$colors
映射也包含许多与您定义为
$theme colors
的颜色相同的颜色，例如
蓝色
、
靛蓝
、
紫色
等。这些将有两次相关CSS变量输出

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

只要您在
$colors
和
$theme colors
中对相同的名称使用相同的颜色值，或者在您的情况下，只要您将
$theme colors
映射设置为与默认
$colors
映射中的任何键匹配到相同的变量，则不会导致任何问题。所以在你的情况下，一切都是正常的，根本不需要担心*

如果您想将例如
$blue
设置为与
$theme colors
中的
“blue”
项不同的值，则会出现问题。在这种情况下，您需要在
$theme colors
地图中使用不同的名称，例如
“blue2”
或类似名称

您可能会发现这些CSS变量的双重存在令人恼火，但我想如果您由于它们之间的交互而意外地覆盖了您自己的一种颜色，情况就是这样


颜色名称变量（例如，
$blue
）
默认的
colors（）
map（其中包含
“blue”：$blue
声明，并导致默认添加的
--blue
css变量）和
$theme colors
映射（可以自定义为也包含键为
的项目“blue”：…
，还将创建一个
--blue
css变量）

如果不过滤掉这些潜在的重复声明，则可以为您调试该问题提供一个起点。否则，仅仅通过查看浏览器中的样式就很难了解发生了什么

*：请注意，每个主题颜色都会为最终CSS增加一些大小，因此最好只包含那些确实需要的颜色。
引导为
$colors
和
$theme colors
贴图定义CSS变量。由于默认的
$colors
映射也包含许多与您定义为
$theme colors
的颜色相同的颜色，例如
蓝色
、
靛蓝
、
紫色
等。这些将有两次相关CSS变量输出

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

只要您在
$colors
和
$theme colors
中对相同的名称使用相同的颜色值，或者在您的情况下，只要您将
$theme colors
映射设置为与默认
$colors
映射中的任何键匹配到相同的变量，则不会导致任何问题。所以在你的情况下，一切都是正常的，根本不需要担心*

如果您想将例如
$blue
设置为与
$theme colors
中的
“blue”
项不同的值，则会出现问题。在这种情况下，您需要在
$theme colors
地图中使用不同的名称，例如
“blue2”
或类似名称

您可能会发现这些CSS变量的双重存在令人恼火，但我想如果您由于它们之间的交互而意外地覆盖了您自己的一种颜色，情况就是这样


颜色名称变量（例如，
$blue
）
默认的
colors（）
map（其中包含
“blue”：$blue
声明，并导致默认添加的
--blue
css变量）和
$theme colors
映射（可以自定义为也包含键为
的项目“blue”：…
，还将创建一个
--blue
css变量）

如果不过滤掉这些潜在的重复声明，则可以为您调试该问题提供一个起点。否则，仅仅通过查看浏览器中的样式就很难了解发生了什么

*：请注意，每个主题颜色都会为最终CSS增加一些大小，因此最好只包含那些确实需要的颜色。
尝试将$theme颜色移到底部。。写在@import statement之后谢谢你的建议但是我