覆盖变量的最佳方法是什么?
我发现下面的顺序工作:
@import "bootstrap/_functions.scss";
$primary: red;
@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";
但如果我想使用Bootstrap中的变量,该怎么办?例如:
@import "bootstrap/_functions.scss";
$primary: $red;
@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";
因为没有定义$red变量,所以无法编译。
我试过这个命令:
@import "bootstrap/_functions.scss";
@import "bootstrap/_variables.scss";
@import "bootstrap/_mixins.scss";
$primary: $red;
这只适用于某些元素,例如bootstap/_ variables. scss包括:
$link-color: $primary !default;
$link-colour变量不使用覆盖,而是使用默认值。
有什么想法吗?
2条答案
按热度按时间bq9c1y661#
我通常使用如下结构,
/src/scss/core
是我的自定义sass目录:这个结构适合我使用变量覆盖/扩展,但就像Zim说的,你也需要覆盖$link-hover-color,因为它的默认值是在你定义你的自定义$primary颜色之前设置的(至少这是我对!default标志的理解)。
xxhby3vn2#
** Bootstrap 5**
我认为您必须设置使用
$link-color
的任何其他变量(即:$btn-link-color
)并将新颜色合并到$theme-colors
贴图中...演示