Bootstrap 4 自定义变量不会覆盖答案

【问题标题】：Bootstrap 4 custom variables doesn't overrideBootstrap 4 自定义变量不会覆盖
【发布时间】：2018-03-24 08:54:19
【问题描述】：

我有一个这样的主要样式.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";

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

【问题讨论】：

您是否尝试过更改 SCSS 的加载顺序？最后可以加载包含被覆盖变量的文件。
什么意思？
您在“components/bootstrap/scss/variables”之前导入“components/variables”，所以我建议您可以更改导入这两个文件的顺序，以便文件与您的变量最终将被导入。
已经尝试过切换这两个但不起作用。
导入“引导变量”；导入“自定义变量”；导入“引导/引导”；导入“引导覆盖”；我做过同样的事情，它确实对我有用。 // 由于提及而删除了@

标签： twitter-bootstrap sass bootstrap-4

【解决方案1】：

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

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

您无法阻止变量被更改。

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

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

【讨论】：

你可能有其他解决这个问题的想法吗？

【解决方案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;

【讨论】：

也许我做错了什么，但我认为这是截至 2018 年的正确答案。我必须将自定义变量的 @import 放在上方 @ 987654334@ BS4 _variables.scss 的路径

【解决方案3】：

也许你创建 override.scss 并将下摆放在你是 variables.scss 之后

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

代码覆盖.scss：

 $green: #you_code;

【讨论】：