Bootstrap 4如何覆盖用于定义其他默认变量的scss变量

Question

首先我想提一下这个问题：Customize bootstrap 4 variables using it's own variables?，似乎有人问了同样的问题，但没有得到富有成果的答案，所以我想我会再举一个非常具体的例子。

我基本上想覆盖一些 bootstrap 4 的默认变量。在下面的示例中，我想覆盖$font-size-base。我遵循了引导文档的推荐方法，但它似乎只是部分工作。 Bootstrap 的默认变量（在_variables.scss 中）重用了其他定义的变量。例如：$input-btn-font-size: $font-size-base !default;。但是，当使用以下方法更改 $font-size-base 时，它不会影响 $input-btn-font-size。

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
$font-size-base: 0.9rem;
$secondary: $gray-400;
@import "node_modules/bootstrap/scss/bootstrap";

另一方面，如果我使用稍后导入变量的下一种方法，那么我确实会得到所需的结果，其中依赖于 $font-size-base 的所有变量也会更改。然而，这不是推荐的方法，当您想要定义一个依赖于默认变量的变量时会变得很清楚。参见$secondary: $gray-400;，这会引发编译错误，因为$gray-400 是未知的。

@import "node_modules/bootstrap/scss/functions";
$font-size-base: 0.9rem;
$secondary: $gray-400;
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/bootstrap";

这里推荐的解决方案是什么？

Answer 1

分离覆盖变量....

只有需要遵循 /variables 导入的是那些引用变量的覆盖（即：$secondary: $gray-400;）。

如果您只想覆盖一个不引用另一个变量（即：$font-size-base: 2.9rem;）的变量，该变量将在 /variables 导入之前...

/* simple overrides */
$font-size-base: 2.9rem;

@import "bootstrap/functions";
@import "bootstrap/variables";

/* var dependent overrides */
$theme-colors: (
  secondary: $gray-400
);

@import "bootstrap";

https://www.codeply.com/go/wpc3XKQ8TG

注意：要覆盖 secondary 等主题颜色，您必须更新主题颜色映射。