Sass 如何在bootstrap 5中访问主题颜色?

Sass 如何在bootstrap 5中访问主题颜色?,sass,bootstrap-5,bootstrap-themes,Sass,Bootstrap 5,Bootstrap Themes,我想定义我自己的主题颜色,以便覆盖标准引导元素,并在以后为我自己的组件使用该值。以下是我在scss文件中使用的代码: $theme-colors: ( "primary": #611fe6, "secondary": #ffbd58, "dark": #000000 ); @import "node_modules/bootstrap/scss/bootstrap"; @import &qu

我想定义我自己的主题颜色,以便覆盖标准引导元素,并在以后为我自己的组件使用该值。以下是我在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的原始原色,而不是我自己的原色

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

简短回答,使用
地图获取

.fa-li {
    color: map-get($theme-colors,"primary")
}
$primary: #611fe6;
$secondary: #ffbd58;
$dark: #000000;

@import "bootstrap";

.fa-li {
    color: $primary
}


“我想定义我自己的主题颜色,这样标准的引导元素 被重写,并在以后对我自己的组件使用该值”

完整答案,对于主题更改,最好重新定义
$primary
的值。这样您就不必使用
map-get
。只需参考
$primary

.fa-li {
    color: map-get($theme-colors,"primary")
}
$primary: #611fe6;
$secondary: #ffbd58;
$dark: #000000;

@import "bootstrap";

.fa-li {
    color: $primary
}


另见: