8

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?

KSPR
  • 2,212
  • 4
  • 29
  • 46

1 Answers1

12

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

Brebber
  • 2,986
  • 2
  • 9
  • 19
  • So it works in a similar fashion like those various js import flavors. Not a fan to be honest. Thanks for clearing things up. – KSPR Feb 26 '21 at 14:48