When importing a file with @use then: Error Undefined Mixin

user_1055155 0
Viewed 5438

I have a entry file:

@use '_mixins';
@use '_default';

Now when I use a mixin in default.scss it throws the error:

Dart Sass failed with this error: Error: Undefined mixin.

Since @use is encouraged I don't understand why this doesn't work. If I write @import like in the olden days it works well:

@import '_mixins';
@import '_default';

This way all is nice and dandy.

How do I have to use @use and still have everything available?

sass
1 Answers

That may be because the use of the new rule @use has an high impact to the way you build your project structure. Using of @usechanges it dramatically:

  1. With @import you add a file and the mixins/vars/modules are ready to use in every sass file you load later on.

  2. With @use you have to load the special sass file you need (i.e. '_mixins') direct in the file where you want to use it direct ... not to the main file. (Yes: loading the mixins/functions/variables-files to EVERY single partial file where you want to use them is the NEW INTENDED way to write sass.

  3. And one more point to your using of @use: If you load by @use 'mixins you have to call the mixin in your file in the separated namespace @include mixins.yourMixinYouCall. If you want to load the mixins without separated namespace you can do: @use 'mixins' as *.

This changing to seperate namespace has some advantages. But indeed that is a really big impact and a very hard discussed theme about the new way to build your sass files.

We had this this week and before posting that twice you may have a look to this posting:

The @use feature of Sass

user_92684850
Related