如何在引导程序5中访问主题颜色

Question

我想定义我自己的主题颜色，这样标准的引导程序元素就可以被覆盖，以后也可以将该值用于我自己的组件。这是我在scss文件中使用的代码：

$theme-colors: (
"primary": #611fe6,
"secondary": #ffbd58,
"dark": #000000
);
@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

.fa-li {
color: $primary;
}

.法莉于是有了最初的原色，而不是我自己的。

Answer 1

"如何在引导程序5中访问主题颜色">

简短回答，使用map-get。。。

.fa-li {
color: map-get($theme-colors,"primary")
}

演示

---

"；我想定义我自己的主题颜色，这样标准的引导元素被重写并且稍后还将该值用于我自己的组件"；

完整答案，对于主题更改，最好重新定义$primary的值。那么您就不必使用map-get了。简单参考$primary。。。

$primary: #611fe6;
$secondary: #ffbd58;
$dark: #000000;
@import "bootstrap";
.fa-li {
color: $primary
}

演示

---

另请参阅：重写引导SCSS变量