title: Sass @use not loading partial
body: <p>I'm trying to import a sass partial (<code>_variables.scss</code>) to use in my main stylesheet (<code>global.scss</code>), but I keep getting the <code>Error: Undefined variable.</code> on sass compiling.</p>
  
  <p>Directory structure:</p>
  
  <pre><code>app
  └─public
    └─styles
      │  global.css (output for sass compiling is here).
      └─sass
        └─_variables.scss
        └─global.scss
  </code></pre>
  
  <p>_variables.scss</p>
  
  <pre><code>$font-text: 'lato', sans-serif;
  </code></pre>
  
  <p>global.scss</p>
  
  <pre><code>@use '_variables';
  
  body {
    font-family: $font-text;
  }
  </code></pre>
  
  <p>Looking at the <a href="https://sass-lang.com/documentation/at-rules/import" rel="noreferrer">Sass documentation</a>, I understand to use <code>@use</code> instead of <code>@import</code> (which works) because they are phasing it out.</p>
  
  <p>What am I doing wrong here? Thanks.</p>