如何在軌道中定製布爾瑪變量

Question

我正在使用布爾瑪軌道寶石，我想自定義它使用的一些變量，特別是字體顏色。

按照布爾瑪文檔http://bulma.io/documentation/overview/customize/我應該做這樣的事情：

// 1. Import the initial variables 
@import "../sass/utilities/initial-variables" 

// 2. Set your own initial variables 
// Update blue 
$blue: #72d0eb 
// Add pink and its invert 
$pink: #ffb3b3 
$pink-invert: #fff 
// Add a serif family 
$family-serif: "Merriweather", "Georgia", serif 

// 3. Set the derived variables 
// Use the new pink as the primary color 
$primary: $pink 
$primary-invert: $pink-invert 
// Use the existing orange as the danger color 
$danger: $orange 
// Use the new serif family 
$family-primary: $family-serif 

// 4. Import the rest of Bulma 
@import "../bulma" 

但是我不知道如何使我使用的鐵軌寶石這項工作。

目前我application.css文件看起來像這樣：

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the bottom of the 
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 
* files in this directory. Styles in this file should be added after the last require_* statement. 
* It is generally better to create a new file per style scope. 
* 
*= require_tree . 
*= require_self 
*/ 

@import "bulma"; 

工作正常。但是，如果我改變它像在布爾瑪文檔改變@import "../bulma"到@import "bulma"和@import "../sass/utilities/initial-variables" 到@import "sass/utilities/initial-variables"

，當我在這裏想這個問題就不再工作連例子是變量，首先進口，但我不能弄清楚如何導入它。這裏是寶石中的文件：https://github.com/joshuajansen/bulma-rails/blob/master/app/assets/stylesheets/sass/utilities/variables.sass

謝謝！

Answer 1

好吧設法得到這個工作。

我在app/assets/stylesheets目錄下創建一個名爲application.css.scss文件，並添加以下內容：

$blue: #72d0eb; 
$pink: #ffb3b3; 
$pink-invert: #fff; 
$family-serif: "Merriweather", "Georgia", serif; 
$primary: $pink; 
$primary-invert: $pink-invert; 
$family-primary: $family-serif; 

@import "bulma"; 

這一切正常。添加最初的導入語句會導致失敗，儘管嘗試使路徑正確但它對我來說總是失敗。不知道這是否有任何意義，我沒有看到，但現在爲我工作。

Answer 2

在我的情況下，application.css已經存在，並且下面的looneym的回答不起作用。原來，我不得不重新命名「application.css」到「application.css.scss」，然後如下我可以改變一些變量：

/* Use Bulma for styling */ 
$green: #00E676; 
$primary: $green; 
@import "bulma"; 

要在RubyMine的做到這一點，只需右鍵點擊樹中的文件，選擇「重構」，然後「重命名」。