首页 文章

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

提问于
浏览 次
3

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

twitter-bootstrap variables sass

1 回答

  • 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';

    由于在定义变量之前无法引用变量，我担心这是唯一的出路 .

    回复于

相关问题