CODEWITHSUNDEEP
sassundefinedscss-mixins
Floyd
Floyd

Reputation: 154

SCSS switching from @import to @use: undefined mixin

For many years I've been completely happy with @import, but times, they are a-changing ...

So I try to shift my projects from @import to @use and @forward, and I found this posting quite useful. But when I try to implement @use into my partials, I keep getting an 'undefined mixin'. I think I may have misunderstood the way @use works, but I can't for the live of me figure out where i went wrong. I've reached the point where I just want to climb the next church tower and start shooting people ... which doesn't help me concentrating either ;)

So I stripped it all down to very basic chunks of code to examine the problem under 'lab conditions'. Here is what I came up whith:

Folders and files:

styles.scss
├── a_tools
│   └── _mixins.scss
├── b_settings
│   └── _global.scss
└── c-components
    └── _test.scss

_mixins.scss:

@use '../b_settings/global' as *;

@function bp($bp) {
  @return ($breakpoints, $bp);
}

@mixin vp-medium {
  @media (min-width: #{breakpoints(small) + 1}) and (max-width: #{breakpoints(medium)}) {
    @content;
  }
}

_gobal.scss:

$breakpoints: (
  'small':                                  767px,
  'medium':                                 1024px,
  'navigation':                             840px,
);

:root {
  --vp-name:                                small;
}

@include vp-medium {
  :root {
    --vp-name:                              medium;
  }
}

_test.scss:

@use 'a_tools/mixins' as *;
@use 'b_settings/global' as *;

.test {
  margin: 10px;

  @include vp-medium {
    margin: 20px;
  }
}

styles.scss:

@use 'c_components/test';

Compiling keeps throwing 'undefined mixin on line 15, column 1 of _global.scss', which is the line '@include vp-medium {'. Compiled with Dart Sass 1.32.8.

Who can tell me where I got on the wrong path? Thanks in advance!

Upvotes: 2

Views: 2236

Answers (1)

Brebber
Brebber

Reputation: 3084

As I understand the new ruls @use the way, that you have to @usethe needed files with the needed mixin to EVERY file you want to use it.

If I did get it reight:

You @used the file mixins with mixin vp-medium in test.scss where it is used.

But you did not @use the same file in global where want to use the mixin as well. Just try to @use the file also to global.

ADDITIONAL:

We had similar discussion here: https://stackoverflow.com/a/66300336/9268485

Upvotes: 1

Related Questions