如何使用另一个变量覆盖 Bootstrap 4 中的变量？

Question

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

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

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

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

经过大量研究，我意识到有些人会通过从 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';

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