Как импортировать файлы Sass с помощью Sass @use

Question

Я пытаюсь использовать функцию нового sass-модуля @use. Даже после прочтения документации и попыток сделать то же самое, не смог понять, как правильно ее использовать. Вот что я попробовал:

в файле keys.scss Я объявил эти переменные

$border-color: black;
$color: white;
$bg: beige;

Таким образом, в main.scss file Я импортирую файл buttons.scss и пытаюсь использовать переменные, которые есть в файле buttons.scss .

@use "buttons";

$button-color: buttons.$color;
$button-bg: buttons.$bg;
$button-border-color: buttons.$border-color;

.btn{
    color: $button-color;
    border: 1px solid $button-border-color;
    background: $button-bg;
    padding: 8px 12px;
    display: inline-block;
}

И структура папок выглядит следующим образом

?css
?sass
 ┣ ?buttons.scss
 ┗ ?main.scss

И выдает ошибку при компиляции Invalid CSS after \"...-color: buttons\. Я слежу за этим блогом Знакомство с модулями Sass .

Как правильно использовать @use?

Answer 1

В вашем случае вам не нужно использовать @use, а @import вместо этого просто так:

@import "./buttons";

Тогда вы сможете использовать свои переменные scss просто так:

$button-bg: $bg;