title: Dart Sass: feed theme variables to new Modules system
body: <p>I work on styles for multi-tenant application for which the choice has been made to use SASS. Following the latest version guidelines, I started building base styles using <code>@use</code> and <code>@forward</code>. Now I want to <strong>theme</strong> this base with customers' colors and fonts variables to receive multiple stylesheets that can be served to different instances of our application.</p>
  <p>If I was to use deprecated <code>@import</code>, I would go like this:</p>
  <pre class="lang-css prettyprint-override"><code>styles/customerA/index.scss
  
  @import &quot;customerA-variables&quot;;
  @import &quot;../base/index&quot;;
  </code></pre>
  <p>But with new rules I cannot find an easy way to simply feed theme specific variables to the base styles. I tried to use <code>with</code> keyword, but it turns out I need to define variables in a module, while I would rather encapsulate them in another module and import it.</p>
  <pre class="lang-css prettyprint-override"><code>styles/customerA/index.scss
  
  @use &quot;customerA-variables&quot; as variables;
  @use &quot;../base/index&quot; with (
    $bgColor: variables.$bgColor,
    $textColor: variables.$textColor
  );
  
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>styles/base/_base-variables.scss
  
  $bgColor: #eee !default;
  $textColor: #333 !default;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>styles/base/index.scss
  
  /* HOW IT WORKS */
  $bgColor: #eee !default;
  $textColor: #333 !default;
  
  /* HOW I WISH IT WORKED */
  @use &quot;./base-variables&quot; as *;
  
  /* LATER IN THE FILE */
  body {
    background-color: $bgColor;
    color: $textColor;
  }
  
  </code></pre>
  <p>In <code>@use &quot;../variables&quot; as *</code> scenario I get this error:</p>
  <pre><code>Error: This variable was not declared with !default in the @used module.
  </code></pre>
  <p>I'm looking for a working solution preferably without copy-pasting all theme variables inside <code>with</code> parenthesis.</p>