title: How can I override variables in Bootstrap 4 with another variable?
body: <p>I am using Bootstrap 4 with SASS and I am questioning myself how to override a variable defined in Bootstrap's <code>_variables.scss</code> with another variable defined in that file.</p>
  
  <p>From the Bootstrap website I learnt to first import my own overrides and then after that import the Bootstrap SASS files. So I did this:</p>
  
  <pre><code>@import 'modules/_overrides.scss';
  @import 'vendor/_bootstrap.scss';
  </code></pre>
  
  <p>In my <code>_overrides.scss</code> I now want to override the body background color with the light gray variable <code>$gray-200</code> defined in Bootstrap's variable file. However as I try accessing a variable before it has been defined I get an error.</p>
  
  <p>After a lot of research I realized some people would get around that problem by copying the variables you want to override from Bootstrap's <code>_variables.sccs</code> and placing them at the top of your overrides file. However this seems like a very dirty way since the variables are now defined in multiple places.</p>
  
  <p>So my question is: is there a way to override Bootstrap variables with another Bootstrap variable?</p>