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

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap 4自定义变量不会覆盖前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个主要的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";

我尝试覆盖我的组件/变量中的成功变量,如下所示:

$green:#71c835!important;

但它不断拾取bootstrap variables.scss的颜色
$green:#28a745!默认;

为了创建一个清晰的视图,我已经尝试切换这两个文件的顺序,如下所示:

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

它真的让我发疯,我怎么能简单地覆盖引导变量

解决方法

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

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

您无法阻止变量被更改.

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

如果要从组件/变量覆盖../components/bootstrap/scss/variables,则在另一个之后导入组件/变量.

猜你在找的Bootstrap相关文章