title: Rails SCSS global variables
body: <p>I've set up my project to use Bootstrap and scss with Webpacker, however, whenever I start my server locally I get this error:</p>
  <pre><code>ActionView::Template::Error (Error: Undefined variable: &quot;$secondary-accent&quot;.
          on line 76:23 of app/assets/stylesheets/_hero.scss
  &gt;&gt;   border: solid 0.5px $secondary-accent;
  </code></pre>
  <p>This error actually goes away locally if I do a hard refresh, but of course, Capistrano is not as forgiving and I want to figure out the issue anyway.</p>
  <p>In my <code>/app/javascscript/</code> folder I have a <code>src/style.scss</code> file which imports the required stylesheets.</p>
  <pre><code>@import '../../assets/stylesheets/_globals.scss'; //import globals first so the values propagate to Bootstrap
  @import '~bootstrap/scss/bootstrap'; //import bootstrap
  @import '../../assets/stylesheets/application.scss' //import everything else;
  </code></pre>
  <p><code>/assets/stylesheets/application.scss</code> looks like:</p>
  <pre><code>@import '_navbar';
  @import 'actiontext';
  @import '_hero';
  @import 'comments';
  @import 'static_pages';
  
  body {
    font-family: $body-font;
    font-size: $standard;
  }
  </code></pre>
  <p>Of course, the easy way to get rid of this is to just add <code>@import 'globals'</code> to each of the partials but that does not seem to fit with the sass way.  I don't really want to add <code>@import 'globals'</code> at the top of every single <code>.scss</code> file, not a big deal at the moment but as the project grows and the complexity of the styles increases maintainability could become a headache. I thought that Webpacker would take care of this, am I wrong?  Am I missing something in the setup?</p>
  <p>Ps. I realize this question has been asked dozens of times, but they all seem to be for older versions of Rails, or the solutions don't apply to me (such as removing the require tree from <code>application.css</code></p>