2015-11-02 85 views
0

我正在使用主題grasyscale-sass,主要是在項目的一個鏈接和它工作正常,其他鏈接使用它自己的SCSS文件。在這個scss文件中,我想將某些引導變量更改爲navbar-default-bg等,但在文件application.html.erb中包含兩個scss文件(application.scss和我的custom.scss文件)以及stylesheet_link_tag,在custom.scss中獲取我對這些變量所做的更改,我認爲始終應用默認值,但正常代碼CSS已被修改。我無法修改rails應用程序中的引導程序變量變量

任何線索我做錯了什麼?或者我想做一些「禁止」的事情?

在此先感謝。

/**************/

這裏application.html.erb文件,這兩個文件SCSS如何在內,無論是在資產/樣式

<%= stylesheet_link_tag 'application', 'custom', media: 'all', 'data-turbolinks-track' => true %> 

custom.scss文件

$link-color: #cb2027; 
$brand-primary: #cb2027; 
$body-bg: #e9e9e9; 
$navbar-default-brand-color: #cb2027; 
$navbar-default-bg:#ffffff; /* Navbar default */ 
$navbar-height: 30px; 

$pagination-active-bg: #cb2027; 
$pagination-active-border: #cb2027; 

i{ 
    color: #337ab7; 
} 

a{ 
    color: #cb2027; 
} 

@import "bootstrap"; 
@import "bootstrap-sprockets"; 

.center { 
    text-align: center; 
} 

.navbar-brand{ 
    font-size: 2em; 
    font-weight: bold; 
} 
... 

的application.js文件,包括資產/ JavaScript的

// 
//= require_self 
//= require jquery 
//= require jquery_ujs 
//= require jquery.easing 
//= require jquery.turbolinks 
//= require turbolinks 
//= require bootstrap-sprockets 
//= require bootstrap 
// require.js 
//= require grayscale 
//= require masonry/jquery.masonry 
// require_tree . 
+0

'application.css'就是肉,JavaScript是並不重要的順序。 – BroiSatse

回答

3

導入引導樣式應用程序/資產/樣式表/ application.scss

@import "bootstrap";@import "bootstrap-sprockets";進去application.scss以及任何其他樣式表。

沒有進入你怎麼能/應設置你的目錄中的樣式表,變量/混入等你的變量需要來引導之前application.scss和其他自定義的後:

由於您使用的一個主題所有準備好的變量都用於定製基本引導程序樣式,您必須更改這些灰度變量和/或樣式才能將它們更改爲所需的樣式。

*在這個例子中_variables = grayscale_variables從主題和main.scss基本上是application.scss

enter image description here

application.scss

@import "grayscale_variables"; 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import "font-awesome-sprockets"; 
@import "font-awesome"; 
@import "_grayscale"; 
@import "style"; 

enter image description hereenter image description here

grayscale_variables。SCSS

$grayscale-primary: #cb2027; 
$grayscale-dark: #e9e9e9; 
$grayscale-light: #cb2027; 

$grayscale-body-font-family: "Lora","Helvetica Neue",Helvetica,Arial,sans-serif; 
$grayscale-headline-font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; 

$navbar-height: 30px; 
$pagination-active-bg: #cb2027; 
$pagination-active-border: #cb2027; 

enter image description here

(*只有一個自舉JS應該用)見bootstrap-sass bootstrap- 鏈輪和引導不應同時被列入的application.js

+0

查看已更新的答案。 – vanburen

0

應用.scss,但仍未實現一些變量,例如$ body-bg,$ navbar-default-bg等等,我認爲它使用灰度級sass主題的main.css。

我也試着改變一些@import

$link-color: #cb2027; 
$brand-primary: #cb2027; 
$body-bg: #e9e9e9; 
$body-bg: #fff; 
$navbar-default-brand-color: #cb2027; 
$navbar-default-bg: #f8f8f8; 
$navbar-height: 30px; 

$pagination-active-bg: #cb2027; 
$pagination-active-border: #cb2027; 

@import 'masonry/transitions'; 
@import 'bootstrap-sprockets'; 
@import 'bootstrap'; 
@import 'custom'; 
@import '../../../grayscale-sass/asset/sass/main.scss'; 
相關問題