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

【问题标题】：How do I use the @use module system of Sass?如何使用 Sass 的 @use 模块系统？
【发布时间】：2020-08-17 05:39:17
【问题描述】：

每当我尝试从 MediaQueries.scss 添加 mixin 或 var 时，它都会告诉我它无法识别它们，它们位于同一个文件夹中，我仔细检查了 var 和 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';

【问题讨论】：

你在使用 Dart Sass 吗？ @use 自 1.23.0 以来仅在 Dart Sass 中受支持，没有其他实现支持它。
哇，不知道... ummm 有什么替换方法吗？用于 vscode 扩展。
VS Code 扩展的替换方法是什么意思？您是通过扩展还是通过命令行/构建脚本编译 Sass？
通过Watch Sass扩展，我的意思是不同的编译过程，IE：不同的扩展或编译器（vscode外部）。
知道了。让我们看看我能不能帮你解决这个问题:)

标签： sass module scss-mixins

【解决方案1】：

由于新的@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"
}

【讨论】：

可以在vscode中使用吗？你能链接任何这个教程吗？我对 Web 开发和包管理很陌生。谢谢！
这将在您的项目中设置为 npm 脚本。 This walkthrough 应该设置好你需要的一切。由于您需要 dart-sass，只需将第 3 步更改为运行npm install sass，然后将第 4 步更改为使用sass 而不是node-sass
我真的不能感谢你，我已经为这个问题苦苦挣扎了一个多月！

【解决方案2】：

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

这里是documentation。

【讨论】：

即使没有扩展，它也会调用这些错误，同样的错误，不管我如何使用@use。还有其他想法吗？