How to fix an Undefined Variable Error in SCSS?

Question

I've run into an Undefined Variable Error writing SCSS.

1. My file structure is sound (I believe), because it compiles the rest of the files as it should into main.scss.
2. I'm using @use instead of @import.

color: #f22437 vs color: $clr-primary

Error: Undefined variable.
   ╷
54 │   color: $clr-primary;
   │          ^^^^^^^^^^^^
   ╵
  scss/layouts/_navigation.scss 54:10  @use
  scss/layouts/_all-layouts.scss 11:1  @use
  scss/main.scss 7:1                   root stylesheet

The files that are in question.

File Structure

UPDATE I changed all @use to @import, and it worked.

Please help me understand why this worked and how I can @use instead of @import. Seems like an issue related to SASS, but I could still be at fault. For now I'll 'hack' it.

Answer 1

I had the same issue and after reading the docs, they say this:

Members (variables, functions, and mixins) loaded with @use are only visible in the stylesheet that loads them. Other stylesheets will need to write their own @use rules if they also want to access them. This helps make it easy to figure out exactly where each member is coming from. If you want to load members from many files at once, you can use the forward rule to forward them all from one shared file.

Solutions:

1. Preferred solution: Use @use in the styles file that is going to use the variables and not in the global one and call the variable like:

namespace.variablename

2. Use the forward rule as docs say
3. Use @import instead of @use but according to this, "Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely"