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 @use
ing 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?
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.