'Watch-css ERROR "Undefined variable" with SASS

I'm trying to use a regular variable in a SCSS file where I save all my @extend:

Extend file:

%menuCard {
   width: $w100;
   height: $h100;
}

Main SCSS file:

// utils
@import "./scss/utils/_buttons.scss", "./scss/utils/_extend.scss";

// variables
@import "./scss/vars/_colors.scss", "./scss/vars/_sizes.scss"; 

Var file (_sizes.scss):

$w100: 100vw;
$w50: 50vw;
$w20: 20vw;
$h100: 100vh;

Once I saved, the console shows me this error:

  "message": "Undefined variable: \"$w100\".",
  "formatted": "Error: Undefined variable: \"$w100\".\n        on line 8 of scss/utils/_extend.scss\n        from line 17 of scss/style.scss\n>>     width: $w100;\r\n   -----------^\n"

I used the _ to separate the others SASS files from the main one, imported them in order and checked for grammar errors. I don't know what is happening.

SCSS FOLDER STRUCTURE



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source