title: Overwriting Bootstrap variables
body: <p>In the documentation of Bootstrap there is stated the following:</p>
  <blockquote>
  <p>Every Sass variable in Bootstrap 4 includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap.</p>
  </blockquote>
  <p>This is working for colors and others, for example: <code>$primary: #ffffff;</code></p>
  <p>However it is not working for every variable with a default-flag. Sometimes it is just working with the !important flag, but that's not what I want. Is there any workaround or am I missing something?</p>
  <p><strong>UPDATE</strong></p>
  <p>I imported the Bootstrap file at the end of my custom.scss, so the order is correct. That's why I'm confused too.
  I found an interesting example, that is confusing me even more from the _variables.scss:</p>
  <pre><code>$gray-900: #212529 !default;
  
  $body-color: $gray-900 !default;
  </code></pre>
  <p>I'm not able to change the color of</p>
  <blockquote>
  <p>$body-color</p>
  </blockquote>
  <p>directly. I have to use the !important flag to make it work that way. On the other hand,</p>
  <blockquote>
  <p>$gray-900</p>
  </blockquote>
  <p>is working correctly. I can change the color from that variable and remove the !default tag and it is changing the body color as a next logical step.
  There still have to be a snap I'm not getting.</p>