title: How to properly override variables of an Angular Library
body: <p>I am basically making a small design library using bootstrap 5 and Angular.
  I am using boostrap core, add some extension or custom style to it (to fit my design).</p>
  <p>Basically, I use bootstrap as follow :</p>
  <p><strong>LIBRARY :</strong></p>
  <p>I have 2 scss in my library :</p>
  <p>design-library.core.scss</p>
  <pre><code>// Required to be imported for bootstrap
  @import '~bootstrap/scss/functions';
  
  // Library default variable that override bootstraps one
  @import './variables'; 
  </code></pre>
  <p>design-library.extension.scss</p>
  <pre><code>// I need to import the variables or they are undefined 
  
  @import './variables'
  // some override of bootstrap style like 
  .alert {
    background: $white;
  }
  </code></pre>
  <p><strong>PROJECT :</strong></p>
  <p>Now, In my project, I use the design-library as follow :</p>
  <p>project.scss</p>
  <pre><code>// Import the default variable of the libraryu
  @import '~/design-library.core';
  
  // override the default with additional variables
  @import './project-variables'
  
  // import bootstrap
  @import '~bootstrap';
  
  // import the extension of bootstrap from the library
  @import '~/design-library.extension'
  </code></pre>
  <p>This works great, the problem I have tho, is with variables overrides.</p>
  <p>Let's say I put <code>$red: #f00</code> as default in the library.</p>
  <p>Then, In the project variables I set <code>$red: #e30000</code></p>
  <p>In my library extension when import <code>variables</code>, I import the one of the library (since I can't import the one of the project of course...). But since I import the one from the Library (and not the override one), all my CSS will be generated with <code>$red: #f00</code>. I want instead all my extension css to use overridden variable so it should be <code>$red: #e30000</code></p>
  <p>How can I import variable after they have been overridden by the project that implements them ?</p>
  <p>EDIT : Is this clear enough ? :x</p>