twitter-bootstrap - Bootstrap 4 自定义变量不会覆盖

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;
但它一直在增加 Bootstrap 的颜色 variables.scss这是
$green: #28a745 !default;
为了创建一个清晰的 View ，我已经尝试像这样切换这两个文件的顺序:

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

这真的让我发疯了我怎么能简单地覆盖 Bootstrap 变量

Answer 1

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

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

您无法阻止变量被更改。

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

如果你想覆盖 ../components/bootstrap/scss/variables来自 components/variables然后导入 components/variables 之后 另一个。