如何使用Sass的@use模块系统？

Question

每当我尝试从 MediaQueries.scss 添加 mixin 或 var 时，它告诉我它无法识别它们，它们在同一个文件夹中，我仔细检查了 vars 和 mixin 名称；

tast.scss:

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

test.scss:

@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

Sass 在导入文件或模块时不需要任何文件扩展名。使用 @use 'tast'; 而不是 @use 'tast.scss';.

这里是 documentation.

Answer 2

由于新的 @use 语法仅被 Dart Sass 支持，VS Code 的 Watch Sass 扩展不支持它（我不知道它是否支持永远都会）因为它使用了 SassJS 的一个版本——而且是一个相当古老的版本。

相反，您应该可以使用 npm install -g sass 在您的计算机上直接安装 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"
}

如何使用Sass的@use模块系统？

How do I use the @use module system of Sass?

module

sass

scss-mixins