如何在Rails中自定义Bulma变量

Question

我是一名帮助翻译的助手。

我正在使用bulma rails gem，希望自定义它使用的某些变量，特别是字体颜色。

根据bulma文档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"

不过，我不确定如何在使用的Rails gem中实现这一点。

目前我的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";

这段代码一开始是可以正常工作的。但是如果我把它改成 bulma 文档中的例子，即使我将 @import "../bulma" 改为 @import "bulma"，将 @import "../sass/utilities/initial-variables" 改为 @import "sass/utilities/initial-variables"，它仍然无法工作。

我猜问题出在第一个变量导入上，但我无法弄清楚如何导入它。这是 gem 中的文件: https://github.com/joshuajansen/bulma-rails/blob/master/app/assets/stylesheets/sass/utilities/variables.sass 谢谢！

- looneym

---

你找到解决方法了吗？我也遇到了同样的问题。 - himanish.k

还没有。我想我会尝试在本地添加完整的Bulma代码，然后以这种方式导入它。我会及时告诉你的。 - looneym

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

这个工作得很好。不过，添加初始的导入语句会导致它失败，我尝试着调整路径以获得正确的路径，但始终无法成功。我不确定是否有什么重要性我没有看到，但现在对我来说已经可以工作了。

- looneym

Answer 2

在我的情况下，"application.css"已经存在，按照looneym的答案操作没有起作用。事实证明，我只需要将"application.css"重命名为"application.css.scss"，然后就可以像下面这样更改一些变量：

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

为了在RubyMine中完成这个操作，只需要在树形目录中右键点击文件，选择“重构”，然后选择“重命名”。

- Hyrum Carlile