title: Dart sass ignores imports in Foundation sass files
body: <p>I'm adding sass and Foundation Sites sass to a project. I created a few sample scss files to test <code>@use</code> statements and make sure autoprefixing is working as expected. However, I cannot figure out why the sass command is ignoring the <code>@import</code> statements in the <code>foundation.scss</code> file. I specified the <code>load-path</code> and it's clearly finding the file, it just doesn't respect the <code>@imports</code> within. </p>
  
  <p>I tried specifying an additional <code>--load-path=./node_modules/foundation-sites/**</code> just in case sass didn't know where to look for the foundation imports, but no luck.</p>
  
  <p>Note: I'm specifically not using <code>node-sass</code> here as it doesn't (yet) recognize the <code>@use</code> statements, but from what I can tell this setup <em>should</em> work?</p>
  
  <p>Thanks for any insight!</p>
  
  <p><strong>Update:</strong> On a hunch I tried swapping out the <code>@use</code> for <code>@import</code> statements in <code>app.scss</code> - same results.</p>
  
  <p><strong>Update 2:</strong> added a small repo to test the problem: <a href="https://github.com/webshooter/my-sass-issue" rel="nofollow noreferrer">https://github.com/webshooter/my-sass-issue</a></p>
  
  <p><strong>My sass command (run via npm):</strong></p>
  
  <pre><code>sass --load-path=./node_modules/foundation-sites/scss --style=expanded ./src/scss:./public/css
  </code></pre>
  
  <p>(sass version 1.23.7 compiled with dart2js 2.6.1)</p>
  
  <p><strong>app.scss:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>@use "other";
  @use "sample";
  @use "foundation";
  
  .app {
    color: #141414;
  }
  
  .prefix-example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
  }
  </code></pre>
  
  <p><strong>_other.scss:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.other {
    color: #ff9900;
  };
  </code></pre>
  
  <p><strong>_sample.scss:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>$font-stack: Helvetica, sans-serif;
  $primary-color: #333;
  
  .sample {
    font: 100% $font-stack;
    color: $primary-color;
  }
  </code></pre>
  
  <p><strong>app.css:</strong> (output)</p>
  
  <pre class="lang-css prettyprint-override"><code>.other {
    color: #ff9900;
  }
  
  .sample {
    font: 100% Helvetica, sans-serif;
    color: #333;
  }
  
  /**
   * Foundation for Sites by ZURB
   * Version 6.6.1
   * foundation.zurb.com
   * Licensed under MIT Open Source
   */
  .app {
    color: #141414;
  }
  
  .prefix-example {
    display: grid;
    transition: all 0.5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
  }
  
  /*# sourceMappingURL=app.css.map */
  </code></pre>