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

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 --version1.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.