ruby-on-rails - 无法覆盖 Rails 4 中的 Bootstrap 变量

Question

这是 Rails 版本 4 特有的。

我有一个文件“custom.css.scss”，我正在使用“navbar navbar-fixed-top navbar-inverse”的 Bootstrap 类，后跟一个 div 的 navbar-inner 和 div 容器。

无论我将变量放在哪里，无论是在 include @bootstrap 之前还是之后，我都无法更改 Bootstrap 反向导航栏的黑色。

这是我的“custom.css.scss”文件的第一部分，我只是尝试将整个该死的东西设置为紫色:

$navbar-inverse-color:                #9b59b6;
$navbar-inverse-bg:                   #9b59b6;
$navbar-inverse-border:               #9b59b6;
$navbar-inverse-link-color:           #9b59b6;
$navbar-inverse-link-hover-color:     #9b59b6;
$navbar-inverse-link-hover-bg:        #9b59b6;
$navbar-inverse-link-active-color:    #9b59b6;
$navbar-inverse-link-active-bg:       #9b59b6;
$navbar-inverse-link-disabled-color:  #9b59b6;
$navbar-inverse-link-disabled-bg:     #9b59b6;
$navbar-inverse-brand-color:          #9b59b6;
$navbar-inverse-brand-hover-color:    #9b59b6;
$navbar-inverse-brand-hover-bg:       #9b59b6;
$navbar-inverse-toggle-hover-bg:      #9b59b6;
$navbar-inverse-toggle-icon-bar-bg:   #9b59b6;
$navbar-inverse-toggle-border-color:  #9b59b6;


@import "bootstrap";

/* mixins, variables, etc. */

但是，它保持完全相同的黑色(反向)导航栏。样式的其他方面(下面它对混合、变量等的评论)都工作正常，我可以毫无问题地更改元素颜色和样式。

我在 Rails 4.0.3 中使用 bootstrap-sass 和 sass-rails 最新版本。我整天都在做这个，看不出有什么办法可以改变 Bootstrap 变量，从而改变我的颜色。

非常沮丧，希望有人能提供帮助:)

编辑:共享提供导航栏(标题)的代码

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class ="navbar-inner">
    <div class="container">
      <%= link_to 'Tracker', root_path, id: "logo" %>
      <nav>
        <ul class="nav pull-right">
          <li><%= link_to "Home",    root_path %></li>
          <li><%= link_to "Help",    help_path %></li>
          <li><%= link_to "About",   about_path %></li>
          <li><%= link_to "Sign in", "#" %></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Answer 1

原因是变量context/scope丢失了。您需要确保只直接导入带下划线 的文件，然后您的变量才会被识别。

非下划线导入的 scss/sass 文件将开始它们自己的变量上下文/范围，忽略它上面的任何内容。

我查的3.3.1版本最新的bootstrap顶层文件是_bootstrap.scss。这是最近的更改(旧的是 bootstrap.scss)，从 3.1.1 升级时我只需要更新一些项目构建文件。在这种情况下，您可能只想更新您的 bootstrap-sass 依赖项，它可能会开始为您工作!