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!

Weltschmerz

Were you able to find a way? I'm having the same issue. – Hartung

Not yet. I think I'll try adding the full bulma code locally and importing it that way. Will keep you posted – Weltschmerz

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.

Weltschmerz

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

Masterful