Question

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

在这里我将举一个我想要实现的目标的例子：

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

我的主题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的 last 覆盖定义。

如果您希望用户变量（仅在指定时）覆盖主题变量，则需要...

给出主题变量 !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";

此外，由于@import /scss/bootstrap/functions已经导入了这些文件，因此没有必要在/scss/bootstrap/variables和/scss/bootstrap.scss之前/ scss / bootstrap。

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

在_user-variables.scss中使用时，覆盖的引导程序4 $ primary变量未应用于所有覆盖的引导程序变量

1 个答案: