当使用in _user-variables.scss时，重写引导4 $primary变量时，未应用于所有过侧引导变量

Question

我正在使用BootStrap 4.3.1制作一个HTML主题。我的目标是重写我的$primary _user-variables.scss中的颜色变量，我认为它应该根据主题_variables.scss更改所有颜色。我是BootStrap 4的新手，所以你能不能帮我一下，而不是标记/重复我的问题？

我在这里举一个例子，说明我想达到的目标：

据我所知，通过在my _user-variables.scss中重写$primary颜色变量，还应该更改设置为在主题_variables.scss中直接使用$primary颜色的每个元素的颜色。这是对的还是我在这里做了什么错事？

我的主题style.scss：

// Theme variables and mixins 
@import "variables";
@import "mixins";

// User Variables
@import "user-variables";

@import "../vendor/bootstrap/scss/functions";
@import "../vendor/bootstrap/scss/variables";

// Bootstrap core
@import "../vendor/bootstrap/scss/bootstrap";

我已经在我的主题_variables.scss中放了这么多代码，它运行得很好：

$primary: #4cbd89;
$link-color: $primary;
$navbar-dark-hover-color: $primary;
$navbar-dark-active-color: $primary;
$navbar-light-hover-color: $primary;
$navbar-light-active-color: $primary;

我试图在_user-variables.scss中覆盖上述自定义变量，如下所示：

$primary: #f00f00;

我猜测重写user-variables.scss中的主颜色应该会自动更改驻留在custom.scss中的5个属性的值，还是需要将其放在user-variables.scss中？我不知道什么是最好的方法。有人能帮帮我吗？

谢谢

Answer 1

按照定义SCSS的方式，只有链接颜色和导航条链接($link-color, $navbar-dark-hover-color, $navbar-dark-active-color, $navbar-light-hover-color and $navbar-light-active-color)将是#4cbd89。所有其他$primary类都将使用$primary: #f00f00，因为这是在bootstrap.scss之前使用的对$primary的最后一次重写定义。

如果希望用户vars可选地(仅在指定时)覆盖主题vars，则需要.

给主题变量 !default标志。

$primary: #4cbd89 !default;
$link-color: $primary !default;
$navbar-dark-hover-color: $primary !default;
$navbar-dark-active-color: $primary !default;
$navbar-light-hover-color: $primary !default;
$navbar-light-active-color: $primary !default;

将用户变量放在主题变量之前。

// User Variables
@import "user-variables";

// Custom Theme variables and mixins 
@import "variables";
@import "mixins";

// Bootstrap core
@import "../vendor/bootstrap/scss/bootstrap";

而且，在/scss/ /scss/bootstrap/variables之前没有理由使用/scss/bootstrap.scss和/scss/bootstrap/variables，因为/scss/bootstrap.scss已经导入了这些文件。

演示：https://www.codeply.com/go/8VyTjEPq4j