变量覆盖不会完全覆盖

Question

我已经通过 npm install 设置了我的项目以利用 sass 覆盖。一切看起来都正常，但是当我调整 $theme-colors 时，它只适用于部分页面？

我试过了：

$theme-colors: ("primary": #FF9671)

// Bootstrap Sass Files
@import "../bootstrap/scss/bootstrap"

和

$primary: #FF9671
$theme-colors: ("primary": #FF9671)
$link: $primary

// Bootstrap Sass Files
@import "../bootstrap/scss/bootstrap"

另外作为旁注，Bootstrap 说我只需要导入：

@import "../bootstrap/scss/functions"
@import "../bootstrap/scss/variables"
@import "../bootstrap/scss/mixins"

但是，这根本不会发生任何事情，因此我必须导入整个 bootstrap.scss 文件才能看到任何结果。这似乎完全是矫枉过正？

提前致谢

Answer 1

考虑在variables.scss 中设置某些引导变量的方式...

$link-color: theme-color("primary") !default;
$component-active-bg: theme-color("primary") !default;

这与设置其他theme-color() 因变量（bg-、alert-、text- 等）的方式不同（通过迭代主题颜色映射）。因此，不要先导入“函数”和“变量”，而是像这样覆盖$primary主题颜色...

$theme-colors: ();
$theme-colors: (
  primary: #FF9671
);

@import "bootstrap";

演示1：https://www.codeply.com/go/gX4Ye5iZgp

或者，您可以像这样简单地覆盖 $primary...

$primary: #FF9671;
@import "bootstrap";

演示2：https://www.codeply.com/go/5tdlvOVTv3

---

相关：Unable to override $theme-color in bootstrap 4

Answer 2

经过多次调整和挠头，我终于注意到我以错误的顺序拉入文件。

文件结构

css/  
|– bootstrap/  
|– custom/  
   _all.sass  
   _variables.sass  
|– main.sass

原始 main.sass

@charset "utf-8"

@import "bootstrap/scss/bootstrap"
@import "custom/all"

习惯在底部，而它应该在上面。因此：

main.sass

@charset "utf-8"

@import "custom/all"
@import "bootstrap/scss/bootstrap"

我认为顺序只在我的variables 文件中很重要，它看起来像这样：

$theme-colors: ("primary": #FF9671)

// Bootstrap Sass Files
@import "../bootstrap/scss/bootstrap"

这也让我意识到我不需要在我的variables 文件中引导@import。当我在我的main.sass 中导入时。现在看起来像这样：

main.sass

@charset "utf-8"

@import "custom/all"
@import "bootstrap/scss/bootstrap"

因此我的变量文件就是这样：

variables.sass

$primary: #845EC2