title: How to customize bulma variables in rails
body: <p>I'm using the bulma rails gem and I Want to customize some of the variables it uses, specifically the font color. </p>
  
  <p>According to the bulma docs <a href="http://bulma.io/documentation/overview/customize/" rel="noreferrer">http://bulma.io/documentation/overview/customize/</a> I should do something like this:</p>
  
  <pre><code>// 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"
  </code></pre>
  
  <p>However I'm not sure how to make that work with the rails gem I'm using.</p>
  
  <p>Currently my application.css file looks like this:</p>
  
  <pre><code>/*
   * 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";
  </code></pre>
  
  <p>which works fine. However if I change it to be like the example in the bulma docs it no longer works even when changing <code>@import "../bulma"</code> to <code>@import "bulma"</code> and <code>@import "../sass/utilities/initial-variables"
  </code> to <code>@import "sass/utilities/initial-variables"
  </code></p>
  
  <p>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: <a href="https://github.com/joshuajansen/bulma-rails/blob/master/app/assets/stylesheets/sass/utilities/variables.sass" rel="noreferrer">https://github.com/joshuajansen/bulma-rails/blob/master/app/assets/stylesheets/sass/utilities/variables.sass</a></p>
  
  <p>Thanks!</p>