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

【问题标题】：How can I override variables in Bootstrap 4 with another variable?如何用另一个变量覆盖 Bootstrap 4 中的变量？
【发布时间】：2018-06-06 07:46:24
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

考虑如果你有2个变量用于同一个元素或类，CSS文件中的最后一个优先

标签： twitter-bootstrap variables sass

【解决方案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';

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

【讨论】：