使用bootstrap-sass gem覆盖Rails中的Bootstrap变量

Question

我正在使用Thomas McDonald的bootstrap-sass gem（Bootstrap 3.0）。 我遵循了Daniel Kehoe的Bootstrap和Rails教程。

我有application.css.scss ，其顶部有以下内容：

 /*
 *= require_self
 *= require_tree .
 */

我有framework_and_overrides.css.scss ，里面有这一行：

@import "bootstrap";

现在我尝试重写引导变量（ $body-bg: #f00; ）我在这里找到并将它们放在这两个文件中的任何一个但没有任何变化。 我究竟做错了什么？

Answer 1

您可以通过在@import指令之前重新定义变量来覆盖变量。

例如：

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";

Answer 2

看到执行周期。 在bootstrap文件中，文件以这种方式呈现，例如我们“获取变量>并应用于导航栏”，这在开始执行引导文件时确实发生。 它存在于引导程序内部，看起来是顺序的导入流程。 ，变量来自bootstrap /变量并在bootstrap / navbar中设置vavbar颜色，这会在navbar中使用变量navbar-default-bg应用颜色。

实际程序员正在做的是在导航栏中设置颜色后尝试设置变量值。 （在“@importing bootstrap”语句之前或之后，变量更改不会对导航栏颜色进行更改，需要在bootstrap文件中进行编辑）

如果您想要更改您必须执行以下操作的颜色，请查看下面的代码。

在bootstrap文件中

//核心变量和混合

@import“bootstrap / variables”;

// 组件

@import“bootstrap / navs”;

$导航栏默认-BG：红色; //初始化$ navbar-default-bg （在导入bootstrap / variables之后）

@import“bootstrap / navbar”; 这里的颜色设置正在执行“

这样可以正常工作，分析执行周期。

但我建议使用其他手动类来应用bg-color而不是过骑自行车变量。

参考： https ： //github.com/RailsApps/rails-bootstrap/issues/12