Как я могу импортировать модуль .s css в свой main.s css с помощью @use

Question

Итак, давайте предположим, что у меня следующая ситуация: у меня есть 2 .s css файла.
Один с переменной и тот, который будет фактически переведен в. css для моей веб-страницы, где я хочу получить доступ к указанной переменной.

vars.s css

$my_color: red;

main.s css

@use 'vars'

body {
  color: $my_color;
}

Я пытаюсь получить доступ к переменной, определенной в vars.css, и использовать ее ,

Ссылка верна, так как, если я использую @import вместо @use, все работает

Я также пытался ссылаться на переменную с vars.$my_color, как было предложено в документации, но я получаю сообщение об ошибке " undefined variable ".

Answer 1

Что ж, если вы прочитали документацию , то в разделе ⚠️ Heads up!, где написано о нежелательности дальнейшего использования правила @import, вы можете прочитать следующее:

---

Правило @import имеет ряд серьезных проблем:

@ import делает все переменные, миксины и функции глобально доступными.

---

Следовательно, @ use правило делает их недоступными . Это то, что вы наблюдаете в действии.

Я думаю, что для достижения желаемого результата следует использовать комбинацию правил @use и @forward.

Но я использую VSCode Live Sass Compiler (возможно вы тоже его используете?) где @ use не поддерживается , поэтому я не могу дать вам точные инструкции.

Надеюсь, это многое прояснит.