Question

我有一个像这样的主要styles.scss：

 //@import "../components/bootstrap/scss/bootstrap";

// Core variables and mixins
@import "../components/bootstrap/scss/functions";
@import "../components/bootstrap/scss/mixins";
@import "components/variables";
@import "../components/bootstrap/scss/variables";

我尝试覆盖components/variables中的成功变量，如下所示：

$green: #71c835 !important;

但它不断提升引导variables.scss的颜色$green: #28a745 !default;

要创建一个清晰的视图，我已经尝试切换这两个文件的序列，如下所示：

// Core variables and mixins
@import "../components/bootstrap/scss/functions";
@import "../components/bootstrap/scss/mixins";
@import "../components/bootstrap/scss/variables";
@import "components/variables";

这真让我疯狂，我怎么能简单地覆盖引导变量

Answer 1

$green: #71c835 !important;表示将绿色变量的值设置为此十六进制代码，然后是重要的。

这并不意味着将绿色变量的值设置为此十六进制代码，并忽略后续尝试更改该值。

您无法阻止变量被更改。

您必须按正确的顺序编写代码。

如果您想从../components/bootstrap/scss/variables覆盖components/variables，请在之后导入components/variables 。

Answer 2

使用第一种情况并删除!default

.....
@import "components/variables";
@import "../components/bootstrap/scss/variables";

复制粘贴要覆盖的变量并更改值。并删除!default属性。再次编译它。

!default属性的作用与！important相反。所以它需要先前声明的变量的值。所以删除!default

!important; //总是胜利。

!default; //如果已经分配了var，请改为使用那个。 - Reference

现在components/variables

 $green:   #71c835;

和../components/bootstrap/scss/variables

 $green:   #28a745;

Answer 3

也许你创建了override.scss并在你改变了变量后放下了.scss

@import "../components/bootstrap/scss/variables.scss";
@import "custome/scss/override.scss";

代码覆盖.scss：

 $green: #you_code;

Bootstrap 4自定义变量不会覆盖

3 个答案: