twitter-bootstrap - 如何用另一个变量覆盖 Bootstrap 4 中的变量？

Question

我正在使用带有 SASS 的 Bootstrap 4，我在问自己如何覆盖 Bootstrap 的 _variables.scss 中定义的变量与该文件中定义的另一个变量。

从 Bootstrap 网站我学会了首先导入我自己的覆盖，然后再导入 Bootstrap SASS 文件。所以我这样做了:

@import 'modules/_overrides.scss';
@import 'vendor/_bootstrap.scss';

在我的 _overrides.scss我现在想用浅灰色变量 $gray-200 覆盖正文背景颜色在 Bootstrap 的变量文件中定义。但是，当我尝试在定义变量之前访问它时，我得到了一个错误。

经过大量研究后，我意识到有些人可以通过从 Bootstrap 的 _variables.sccs 复制要覆盖的变量来解决这个问题。并将它们放在覆盖文件的顶部。然而，这似乎是一种非常肮脏的方式，因为变量现在在多个地方定义。

所以我的问题是:有没有办法用另一个 Bootstrap 变量覆盖 Bootstrap 变量？

Answer 1

我最近在一个项目中遇到了同样的困境。我发现这不那么脏的一种方法是在包含我的覆盖变量和 Bootstrap 的变量之后给变量值。

@import 'modules/_overrides.scss';
@import 'vendor/_bootstrap.scss';

$body-bg: $gray-light;

您可以通过在较早的时候定义自己的变量(独立于 Bootstrap)并使用这些变量为 Bootstrap 变量赋予新值来进一步清理这一点。

$myOwnGrayColor: #555;
@import 'modules/_overrides.scss';
//In _overrides.scss make something like $body-bg: $myOwnGrayColor; and $gray-light: $myOwnGrayColor;
@import 'vendor/_bootstrap.scss';

由于在定义变量之前您不能引用变量，因此恐怕这是唯一的方法。