4

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?

Zack Plauché
  • 3,307
  • 4
  • 18
  • 34

2 Answers2

4

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.

Zack Plauché
  • 3,307
  • 4
  • 18
  • 34
0

to use @use command and other new features of sass, you need to install dart sass, and not node-sass;

https://www.npmjs.com/package/sass

Rishi Bhachu
  • 162
  • 2
  • 10