不能覆蓋Rails的引導變量4

我有一個外商投資企業「custom.css.scss」和正在使用「導航欄導航欄固定頂navbar-的引導類反向「，後面跟着一個navbar-inner和div容器的div。

無論身在何處，我把變量，無論是之前的包括@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. */

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

我使用的引導，青菜和青菜護欄最新版本使用Rails 4.0.3。我一整天都在這裏，並且看不到改變自舉變量的方式，也就是我的顏色。

非常沮喪，並希望有人能幫助:)

編輯：共享代碼，讓導航欄（頭）

<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>

來源

2014-03-19 tentimes

重寫變量不會改變你在你的樣式表使用導航欄的風格。例如：如果你想改變導航欄背景，那麼你可以做一些像.navbar-inverse{background:$navbar-inverse-bg;} – Monideep

你的代碼看起來沒問題。變量應在'@import「引導程序之前設置。你可以在你使用'navbar-inverse'的地方分享代碼嗎？另外，bootstrap是否正確加載到應用程序中，您是否看到它應用於其他元素？ –

深：沒有區別，它仍然是完全一樣的黑色反向導航欄恐怕:( – tentimes

的原因是可變的情況下/範圍丟失。你需要確保你只導入強調文件直接，那麼你的變量會被認可。

非下劃線導入的scss/sass文件將開始他們自己的變量上下文/範圍，忽略任何高於它的東西。

在我檢查3.3.1版本的最新引導頂層文件是_bootstrap.scss。這是最近發生的變化（舊版本是bootstrap.scss），我只是在從3.1.1升級時更新了一些項目構建文件。在這種情況下，您可能只想更新您的bootstrap-sass依賴關係，它可能會開始爲您工作！

來源

2015-01-06 03:03:30 kross

我知道，stackoverflow不會讓我評論'謝謝'，但感謝你拯救了我的一天。 –

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

在這個文件中，別的，進口「引導/變量」，（如在創業板中的「_bootstrap.scss」文件中指定。），然後之前進行自定義設置。這是文檔中未強調的「一個小細節」！

請注意，這些只是Bootstrap變量覆蓋，在Bootstrap加載後，您的'常規'自定義仍將位於'custom.css.scss'中。

接下來，@import「引導」語句之前引用「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";

來源

2017-04-26 16:02:59 Karl

不能覆蓋Rails的引導變量4

回答

相關問題