title: Cannot make variables globally accessible in SASS
body: <p>I'm trying to set global variables in one file and then use these variables in all other scss files throughout the application. When I set the variables I can use them in that specific file but not others. I am using the '@use' method instead of '@import' as the sass docs recommended it however it seems the '@import' method would achieve what I need however I need a workaround for the long term. Finally, I tried using the '@forward' method but could not see any change and I got the same errors.</p>
  
  <p><strong>app.scss</strong></p>
  
  <pre><code>@use 'layouts/variables.scss';
  @use 'layouts/forms.scss';
  </code></pre>
  
  <p><strong>_variables.scss</strong></p>
  
  <pre><code>$ds-black: #212121;
  </code></pre>
  
  <p><strong>_forms.scss</strong></p>
  
  <pre><code>input
  {
      border: 1px solid $ds-black;
  }
  </code></pre>
  
  <p>Console output when compiling:</p>
  
  <pre><code>Error: Undefined variable.
     ╷
  14 │     border: 1px solid $ds-black;
     │                       ^^^^^^^^^
     ╵
    resources\css\layouts\_forms.scss 14:23  @use
    resources\css\app.scss 4:1               root stylesheet
  </code></pre>
  
  <p>I tried using the ' !global ' attribute however I got this error as well as the previous</p>
  
  <pre><code>Deprecation Warning: As of Dart Sass 2.0.0, !global assignments won't be able to
  declare new variables. Since this assignment is at the root of the stylesheet,
  the !global flag is unnecessary and can safely be removed.
  
    ╷
  9 │ $ds-black: #212121 !global;
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
      resources\css\layouts\_variables.scss 9:1  @use
      resources\css\app.scss 3:1                 root stylesheet
  </code></pre>