How to customize bulma variables in rails

Question

I'm using the bulma rails gem and I Want to customize some of the variables it uses, specifically the font color.

According to the bulma docs http://bulma.io/documentation/overview/customize/ I should do something like this:

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

However I'm not sure how to make that work with the rails gem I'm using.

Currently my application.css file looks like this:

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

which works fine. However if I change it to be like the example in the bulma docs it no longer works even when changing @import "../bulma" to @import "bulma" and @import "../sass/utilities/initial-variables" to @import "sass/utilities/initial-variables"

I guess the problem here is with that first import of the variables but I can't figure out how to import it. Here's the file in the gem: https://github.com/joshuajansen/bulma-rails/blob/master/app/assets/stylesheets/sass/utilities/variables.sass

Thanks!

Answer 1

Ok managed to get this working.

I created a file called application.css.scss in the app/assets/stylesheets directory and added the following:

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

@import "bulma";

This works just fine. Adding the initial import statement causes to fail though, played around with it a bit trying to get the path correct but it always failed for me. Not sure if this has any significance I'm not seeing but works for me now anyways.

Answer 2

In my case, application.css was already existing, and following looneym's answer didn't work. Turns out, I just had to rename "application.css" to "application.css.scss", and then I could change some of the variables as follows:

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

To do this in RubyMine, just right click the file in the tree, select "refactor" and then "rename".