How to use mixins with nextjs 13

I am using Nextjs 13.

My global.scss imports my _mixins.scss from the same styles folder.

@import "mixins";

:root {
  --font-size-300: 0.75rem; // 12px
  --font-size-400: 1rem;    // 16px, base
  --font-size-500: 1.25rem; // 20px
  --font-size-600: 1.5rem;  // 24px
  --font-size-700: 1.75rem; // 28px
  --font-size-800: 2rem;    // 32px
  --font-size-900: 2.25rem; // 36px
}

html,
body {
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

My _mixins.scss file

// 36 * 16 = 576
@mixin sm {
  @media (min-width: 36rem) {
      @conte开发者_StackOverflow社区nt;
  }
}

// 48 * 16 = 768
@mixin md {
  @media (min-width: 48rem) {
      @content;
  }
}

// 62 * 16 = 992
@mixin lg {
  @media (min-width: 62rem) {
      @content;
  }
}

// 75 * 16 = 1200
@mixin xl {
  @media (min-width: 75rem) {
      @content;
  }
}

// 87.5 * 16 = 1400
@mixin xxl {
  @media (min-width: 87.5rem) {
      @content;
  }
}

I try to use my mixin in my layout.module.scss file in my app folder

.wrapper {
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  padding: 0 2rem;
  @include xl {
    max-width: 75rem;
  }
}

But I get an error

If I add @import "@styles/mixins"; on top of my layout.module.scss file, the error goes away. But why should I have to import the mixins from my layout.module.scss file when I have already imported it into my global.scss file?