4

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.

incloxe
  • 43
  • 1
  • 1
  • 4
  • According to this (https://github.com/sass/sass/issues/2070), they say make the variable files to the top. – rensothearin Nov 24 '20 at 05: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. – incloxe Nov 24 '20 at 15:16

4 Answers4

5

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"
augusticor
  • 86
  • 1
  • 5
0

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

Samse
  • 91
  • 1
  • 9
  • 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. – incloxe Nov 24 '20 at 16:26
  • 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. – Samse Nov 25 '20 at 08:34
0

This works for me

`@use 'variables';

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

chicacode
  • 41
  • 5
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; }
changokun
  • 1,563
  • 3
  • 20
  • 27