如何在rails中自定义bulma变量答案

【问题标题】：How to customize bulma variables in rails如何在rails中自定义bulma变量
【发布时间】：2017-11-04 23:12:12
【问题描述】：

我正在使用 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

谢谢！

【问题讨论】：

你找到方法了吗？我也有同样的问题。
还没有。我想我会尝试在本地添加完整的 bulma 代码并以这种方式导入。会及时通知您

标签： css ruby-on-rails bulma

【解决方案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";

这很好用。添加初始导入语句会导致失败，尝试使用它来获得正确的路径，但它对我来说总是失败。不确定这是否有任何意义，我没有看到，但无论如何现在对我有用。

【讨论】：

【解决方案2】：

在我的例子中，application.css 已经存在，并且按照 looneym 的回答没有用。原来，我只需要将“application.css”重命名为“application.css.scss”，然后我可以更改一些变量如下：

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

要在 RubyMine 中执行此操作，只需右键单击树中的文件，选择“重构”，然后选择“重命名”。

【讨论】：