title: Prepended SCSS mixins with CSS variables not working in NextJS
body: <p>I've got the following next.config.js setup</p>
  <pre><code>module.exports = (phase, {defaultConfig}) =&gt; {
    if ('sassOptions' in defaultConfig) {
        defaultConfig['sassOptions'] = {
            includePaths: ['./styles'],
            prependData: `@import &quot;styles/mixins.scss&quot;;`,
        }
    }
    return defaultConfig;
  }
  </code></pre>
  <p>and while the following mixin works flawlessly within my xyz.module.scss</p>
  <pre><code>@mixin panelBoxShadow() {
    box-shadow: 0 2px 7px 0 rgba(0,0,0,0.11);
  }
  
  // Used in module.scss like
  @include buttonBoxShadow();
  </code></pre>
  <p>this mixin doesn't work at all</p>
  <pre><code>@mixin maxWidth($value) {
    @media (max-width: $value) {
      @content
    }
  }
  
  // Used in module.scss like
  @include maxWidth(var(--tablet)) {
      padding-bottom: 1rem;
      ... 
  }
  </code></pre>
  <p>I know that SCSS/SASS is a preprocessor and its evaluated before the var() CSS variables, however how can I make this work without having to go back to manually importing the mixins.scss in every xyz.module.scss and using SCSS variables in there? Is there even a way?</p>