我想定义我自己的主题颜色,以便覆盖标准引导程序元素,并稍后将值用于我自己的组件。这是我在 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;
}
.fa-li 然后具有 bootstrap 的原始原色,而不是我自己的原色。
答案 0 :(得分:1)
“如何在 bootstrap 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
}