When I use @import everything works fine, but @use gives an error when compiling?

Question

I've followed a tutorial on using scss with laravel mix, and all seemed to work fine when compiling until I changed @import to @use. I keep getting the following error:

Below I've placed several screenshots of the files that I'm currently using.

From what I've understood, below should be the correct way to use @use if I don't want to add a namespace before the variables I'll be using. Everything seems to be fine when I use @import on all of these, so I wonder what's going wrong with @use?

Is it possible I'm using a version of sass that is outdated? If so, how do I check it? I tried several npm commands but I fear I'm a bit of a novice when it comes to using the right one. I've honestly stumbled upon many issues throughout this little journey but I've managed to fix them all until this one. Help would be greatly appreciated!

Answer 1

@use "imports" items into the file that the @use appears, unlike @import that makes the items available globally.

So, you'd need to add the @use "colors" as * statement to _header.scss and _content.scss for the variables in _colors to be visible in those files.