6

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.

Error Image

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.

Improve this question
3
  • According to this (github.com/sass/sass/issues/2070), they say make the variable files to the top. Commented Nov 24, 2020 at 5:37
  • It is at the top of my scss/helpers/_variables.scss is at the top of the helpers directory, and the helpers directory is at the top of my main.scss file (as shown in files image). Also, I tried importing the variables file separately & first, but that didn't fix the issue. Commented Nov 24, 2020 at 15:16
  • Remember to either import using @use 'variables' as * or to prepend the module name when referencing the variable color: variables.$clr-primary. Commented Mar 21, 2024 at 15:16

4 Answers 4

Reset to default
6

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
  1. Use the forward rule as docs say
  2. 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"
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

This works for me:

@use 'variables';

body {
  color: variables.$text-colour;
}
Improve this answer

Comments

1

First:

@use is currently only available for Dart Sass and not LibSass or Ruby Sass. See https://sass-lang.com/documentation/at-rules/use for the latest compatibility

Second:

_variables.scss

$text-colour: #262626;

_otherFile.scss

@use 'variables';

body {
  color: variables.$text-colour;
}

Check @whiscode answer here: https://stackoverflow.com/a/61500282/2470685

Improve this answer

2 Comments

I attached an image of the file structure showing how the files are being called to compile. I tried applying your comments to the code, but unfortunately nothing changes. I'm using dart sass, but still unable to use. Import works just fine though.
Well the problem in you code is, that you want to use "@use" trough multiple files. And your variables are binded to namespaces, when you do it like that. The "_navigation.scss" never knows, what namespace he has to use for your variables. So the best approach for you, is to either user @import and let the file structure as it is or @use your variables in every file, as I declared in my answer.
0

I found another reason that my variable was not defined. You cannot "declare" a variable (ie define it for the first time) inside of a conditional. My code was something like this:

@if $dark-mode { $color: red; }

No matter what $dark-mode evaluated to, $color was not defined when I needed it. If I added a simple default declaration above the conditional, it works every time:

$color: black; // declaration and default
@if $dark-mode { $color: red; }
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.