Почему использование правила не работает в sass?

Question

Я начинаю с sass и пытаюсь импортировать файл с моими переменными.

это выглядит так

// _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;
}

Когда я компилирую, я получаю " Неопределенная переменная "и в моем стиле. css" @use 'переменные' "появляются сверху, но если я использую @import вместо этого, все работает хорошо. Я знаю, что могу использовать импорт, но на веб-сайте Sass они рекомендуют использовать "@use", поэтому не могли бы вы помочь мне исправить эту ошибку и понять, почему она не работает?

Answer 1

Согласно документации , sass добавляет неявное пространство имен, когда вы используете @use.

Так что если вы пишете свой файл, используя подчеркивание перед ним, например _variables.scss:

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

Вы сможете использовать эти переменные, используя пространство имен variables:

@use "variables";

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

Если вам нужно другое имя пространства имен, просто используйте as:

@use "variables" as myVariables;

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