sass compile issue with @use and @forward

Viewed 569

I've been researching this for hours now and its driving me nuts. I've tried 3 compilers and they all give the same error.

Error: no mixin named flex

My code:

// style.scss
@use "mixins" as *;

.home {
  .header {
    @include flex(column);
    padding: 20px 10px 0;
    text-align: center;
  }
}

// _mixins.scss
@forward "mixins/flex";
@forward "mixins/overlay";

// mixins/_flex.scss
@mixin flex($flex-flow: row, $justify-content: center, $align-items: center) {
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-flow: $flex-flow;
}
1 Answers

You'll need to use a compiler that uses Dart Sass.

I recommend using prepros. They have a free version and a paid version, the biggest difference between the 2 is that the free version has an annoying popup.

Related