Why the at-rule use doesn't work in sass?

user_12565399 0
Viewed 2576

I'm beginning with sass and i'm trying to import a file with my variables.

it's look like this

// _variables.scss
$blue: #0D6EFF;
$red: #FB2B37;
$black: #272727;
$green: #31E3A1;
$lightgrey: rgba(172, 179, 186, 0.5);

// style.scss
@use "variables";

html, body{
    height: 100%;
    margin: 0;
    position: relative;
    color: $blue;
    font-size: 18px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

When I compile I get "Undefined variable" and in my style.css the "@use 'variables' " appears at top but if I use @import instead everything works well. I know I could use import but on the Sass website they recommand to use "@use" so could you help me please to fix that bug and understand why it doesn't work ?

sass css
1 Answers

According to the documentation, sass add an implicit namespace when you use @use.

So if you write your file using an underscore in front of it like _variables.scss:

$blue: #0D6EFF;
$red: #FB2B37;
$black: #272727;
$green: #31E3A1;
$lightgrey: rgba(172, 179, 186, 0.5);

You will be able to use this variables using the variables namespace:

@use "variables";

html, body{
  height: 100%;
  color: variables.$blue;
  ...

If you want an other namespace name, just use as:

@use "variables" as myVariables;

html, body{
  height: 100%;
  color: myVariables.$blue;
  ...
user_85836690
Related