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

Question

我正在使用带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变量？

Answer 1

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

EnvironmentFile

您可以通过在较早的时候定义自己的变量（独立于Bootstrap）并使用这些变量为Bootstrap变量赋予新值来清理它。

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

$body-bg: $gray-light;

由于你无法在定义之前引用变量，我担心这是唯一的方法。