title: Overriding Bootstrap SCSS Variables
body: <p>What is the best way to override variables?</p>
  <p>I found the following order works:</p>
  <pre><code>@import &quot;bootstrap/_functions.scss&quot;;
  
  $primary: red;
  
  @import &quot;bootstrap/_variables.scss&quot;;
  @import &quot;bootstrap/_mixins.scss&quot;;
  </code></pre>
  <p>But what if I want to use a variable from Bootstrap? For example:</p>
  <pre><code>@import &quot;bootstrap/_functions.scss&quot;;
  
  $primary: $red;
  
  @import &quot;bootstrap/_variables.scss&quot;;
  @import &quot;bootstrap/_mixins.scss&quot;;
  </code></pre>
  <p>This doesn't compile because the $red variable isn't defined.</p>
  <p>I've tried this order:</p>
  <pre><code>@import &quot;bootstrap/_functions.scss&quot;;    
  @import &quot;bootstrap/_variables.scss&quot;;
  @import &quot;bootstrap/_mixins.scss&quot;;
  
  $primary: $red;
  </code></pre>
  <p>Which works but only for some elements. For example bootstap/_variables.scss includes:</p>
  <pre><code>$link-color: $primary !default;
  </code></pre>
  <p>The $link-colour variable doesn't use the override and instead uses the default value.</p>
  <p>Any ideas?</p>