变量替代不能完全替代

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 ...

中设置一些Bootstrap变量的方式。

$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"

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

main.sass

@charset "utf-8"

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

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

variables.sass

$primary: #845EC2