無法覆蓋Rails 4中的Bootstrap變量

Question

這是Rails版本4特有的。

我有一個fie“custom.css.scss”並使用“navbar navbar-fixed-top navbar-inverse”的bootstrap類，后跟一個navbar-inner和div容器的div。

無論我在哪里放置變量，無論是在包含@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. */

但是，它保持完全相同的黑色（反向）導航欄。 樣式的其他方面（下面是對mixins，變量等的評論）都可以正常工作，我可以更改元素顏色和樣式沒有問題。

我使用Rails 4.0.3的bootstrap-sass和sass-rails最新版本。 我整天都在這里，並且看不到改變引導變量因此我的顏色。

非常沮喪，希望有人可以幫助:)

編輯：共享代碼，提供導航欄（標題）

<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

原因是變量上下文/范圍丟失了。 您需要確保只直接導入下划線文件，然后才能識別您的變量。

非下划線導入的scss / sass文件將開始它們自己的變量上下文/范圍，忽略它上面的任何內容。

我檢查的版本3.3.1中的最新引導程序頂級文件是_bootstrap.scss 。 這是最近的一個更改（舊的是bootstrap.scss ），我只需要在從3.1.1升級時更新一些項目構建文件。 在這種情況下，您可能只想更新bootstrap-sass依賴項，它可能只是為您開始工作！

Answer 2

假設您正在引用並配置了Bootstrap gem（'bootstrap'或'bootstrap-sass'），請在app / assets / stylesheets文件夾中創建一個文件，其名稱將導致它在'application'之前加載。 scss'（例如'_custom_variables.scss'）。

在此文件中，在其他任何內容之前，導入“bootstrap / variables”，（在gem中的'_bootstrap.scss'文件中指定。）然后進行自定義。 這是文檔中沒有強調的“一個小細節”！

請注意，這些只是Bootstrap變量覆蓋 ，在加載Bootstrap之后，“常規”自定義仍將位於“custom.css.scss”中。

接下來，在@import“bootstrap”語句之前引用“application.scss”中的自定義文件。

例：

在您的變量自定義文件中，_custom_variables.scss：

// app/assets/stylesheets/_custom_variables.scss
@import "bootstrap/variables";
$body-bg:    $gray-dark;
$body-color: $gray-light;

在application.scss中：

// app/assets/sytlesheets/application.scss   

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "custom_variables";
@import "bootstrap";