sassscss-mixinsprepros

Sass @use not working with separated mixin files into master mixin file (ERR: Undefined Mixin)


I'm a bit newer to sass, but when I was learning it the Sass website said to start using @use instead of import, so after a lot of trial and error I finally figured out how to use it pretty much the same as import.

Note: I'm using Prepros for compiling.

I have this mixin in it's own file inside of a mixins folder:

// scss/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;
}

I tried @useing it in my main _mixins.scss file:

// scss/_mixins.scss

@use "mixins/flex" as *;

Then I tried using it in another one of my files containing common elements:

// scss/_common_elements.scss

@use "mixins" as *;

.flex {
  @include flex();
}

Then I receive the error inside of Prepros log: Undefined Mixin where I call the @include flex(); line (inside of _common_elements.scss)

It was working until I decided to put the mixins in their own separate folder, but this is the same as how it's setup inside of Bootstraps source code.

This whole process of using @use has been really confusing.

Does anyone know why I might be getting this error?


Solution

  • I managed to fix it!

    ALSO: If you can help me edit this question / answer to better explain it with proper language, please post suggestions and I'll update it.

    In the _mixins.scss file I needed to use @forward "mixins/flex" instead of @use "mixins/flex" as *;:

    Like this:

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

    I wish they would've made this something more clear on the actual sass @use documentation.

    Here are the actual docs to @forward.