SASS @use issue? Works for variables but not mixins?

Question

Basically I'm working on a project, and completely confused why my scss file is not importing a mixin from another scss file. I have read the documentation on Sass and I believe I have followed the syntax correctly.
Here's the problem, I have two scss files:

File 1, called variables.scss. I place all my variables and mixins in this file:

//lato import
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;1,700&display=swap");

// josefin sans import

@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;500;700&display=swap");

//color scheme

$dark_red: #79040a;
$black: #111114;
$yellow: #fdce6e;

//fonts

$lato: "Lato", sans-serif;
$josefin_sans: "Josefin Sans", sans-serif;

@mixin flex-row {
  display: flex;
  flex-direction: row;
}

File 2, called carousel.scss. I'm trying to import variables.scss using @use:

@use "../variables.scss" as *;

.homepage {
  &--carousel {
    &-slide {
        @include flex-row;
    }
    &-arrow {
      width: 1rem;
      height: 1rem;
      background: $dark_red;
    }
  }
}

To get from carousel.scss to variables.scss, I need to go up one file directory to access it, hence the ../.

I get this error:

Error: Undefined mixin.
  ╷
7 │       @include flex-row;
  │       ^^^^^^^^^^^^^^^^^
  ╵
  src\react-components\homepage\carousel.scss 7:7  root stylesheet

carousel.scss has failed to import the mixin from variables.scss.

The plot thickens, because now when I remove @include flex-row, I get no error. This is strange because I should get an error for $dark_red, but I don't, which means that I have imported variables.scss correctly, and the square does show as dark red in the browser.

So @use here works for variables, but it doesn't work for importing mixins.

My question is, why? What have I done wrong? I tried using @import and it doesn't work either.

This is my Sass version, not sure what this means or if I have configured this wrong, but I've had no other problems with compilation using Sass, it's just this issue.

$ sass --version
1.70.0 compiled with dart2js 3.2.5

By the way, I have used this particular mixin before, and I know that it works. If I place this mixin at the top of carousel.scss, there is no issue, but I don't want to do it this way. I'd rather have everything in one file, because I have lots of scss files. I even tried ChatGPT to go through my code and it couldn't work it out, so I came here.

Thanks a lot for helping me with this, I tried everything.