Dart sass ignores imports in Foundation sass files

Question

I'm adding sass and Foundation Sites sass to a project. I created a few sample scss files to test @use statements and make sure autoprefixing is working as expected. However, I cannot figure out why the sass command is ignoring the @import statements in the foundation.scss file. I specified the load-path and it's clearly finding the file, it just doesn't respect the @imports within.

I tried specifying an additional --load-path=./node_modules/foundation-sites/** just in case sass didn't know where to look for the foundation imports, but no luck.

Note: I'm specifically not using node-sass here as it doesn't (yet) recognize the @use statements, but from what I can tell this setup should work?

Thanks for any insight!

Update: On a hunch I tried swapping out the @use for @import statements in app.scss - same results.

Update 2: added a small repo to test the problem: https://github.com/webshooter/my-sass-issue

My sass command (run via npm):

sass --load-path=./node_modules/foundation-sites/scss --style=expanded ./src/scss:./public/css

(sass version 1.23.7 compiled with dart2js 2.6.1)

app.scss:

@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);
}

_other.scss:

.other {
  color: #ff9900;
};

_sample.scss:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

.sample {
  font: 100% $font-stack;
  color: $primary-color;
}

app.css: (output)

.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 */

Answer 1

Actually i think the correct --load-path to use is : ./node_modules/foundation-sites/assets

Try to:

• [ Optional ] Replace @use with @import statements in your app.scss :

    @import "other";
    @import "sample";
    @import "foundation";
  

• Use this to compile you sass files sass --load-path=./node_modules/foundation-sites/assets --style=expanded ./src/scss:./public/css

this should fix the import issue