Как использовать модульную систему @use в Sass?

Question

Каждый раз, когда я пытаюсь добавить миксин или переменную из MediaQueries.s css, он сообщает мне, что не распознает их, они находятся в той же папке, и я дважды проверил имена переменных и миксинов;

tast.s css:

$var: 200px;
@mixin blue {
    color: blue;
}

test.s css:

@use 'tast.scss';
.a {
    width: $var; // undefined variable
    width: tast.$var; // expected expression, was ".var;"
    @include blue; // no mixin named blue
    @include tast.blue; // expected "}", was ".blue;"
}

* Это вызывает те же ошибки, если я использовал это:

 @use 'tast';

Answer 1

Поскольку новый синтаксис @use поддерживается только Dart Sass, расширение Watch Sass для VS Code не поддерживает его (и я не знаю, будет ли оно когда-либо), поскольку оно использует версию Sass JS - и довольно старый при этом.

Вместо этого вы сможете установить Sass прямо на свой компьютер с помощью npm install -g sass. Это установит версию Sass для Dart.

После установки и доступности в вашем PATH вы можете затем использовать сценарий для просмотра файла Sass или всего каталога и компиляции по мере внесения изменений.

"scripts": {
  // watch a single file
  "sass:watch": "sass --watch input.scss output.css",

  // watch a directory 
  "sass:watch": "sass --watch src/sass:build/styles"
}

Answer 2

Sass не требует никаких расширений файлов, когда вы импортируете файл или модуль. Используйте @use 'tast'; вместо @use 'tast.scss';.

Вот документация .