为什么 @use 在 Web Compiler Visual Studio 扩展中不起作用？答案

【问题标题】：Why does @use not work in Web Compiler Visual Studio extension?为什么 @use 在 Web Compiler Visual Studio 扩展中不起作用？
【发布时间】：2019-12-13 07:38:28
【问题描述】：

我正在使用 Web 编译器扩展 (1.12.394) 运行 Visual Studio 2019 (16.3.9) 来编译 scss 文件。

这是一个有效的简单案例。我有一个文件 - test.scss：

$color: blue;

.button {
    background-color: $color;
}

编译成这样：

.button {
    background-color: blue;
}

但是，如果我尝试执行此处概述的操作 - https://sass-lang.com/documentation/at-rules/use#configuring-modules - 它似乎不起作用。我创建了另一个文件 - _base.scss：

$color: red !default;

.button {
    background-color: $color;
}

然后我将我的 test.scss 文件更改为：

@use 'base' with (
  $color: blue
);

我希望编译后的输出与原始示例相同：

.button {
    background-color: blue;
}

但这就是我得到的：

@use 'base' with (
  $color: blue
);

我的猜测是编译器对@use 规则不满意，但我没有看到任何错误。 _base.scss 和 test.scss 在同一目录中。我只是 Sass 的新手，但这肯定是可能的吗？

【问题讨论】：

Sass 模块还是很新的，可能是 web 编译器还没有支持它的 Sass 版本。

标签： sass web-compiler

【解决方案1】：

这是在 GitHub 上的 Web Compiler 上作为问题提交的： @use does not work

回复是：

@use 目前仅支持 dart-sass 等平台使用 @import 现在，所以这不是 Web 编译器问题

我也是 Sass 的新手，我不知道如何判断 Web Compiler 支持哪个版本的 Sass。（编辑：刚刚发现SO问题Which version of SASS is my WebCompiler extension using?）

令人沮丧，因为我正在努力防止 @imports 出现重复的 CSS，而 @use 似乎就是答案。

【讨论】：

【解决方案2】：

如前所述，我是 Sass 的新手，所以直接使用最新功能。正如@Bauke 所提到的，我的第一个预感是当前版本的Web Compiler 不支持@use（以及Sass 的其他新功能）。

基于此，我选择了一种使用当前支持的功能的解决方法，以达到相同的结果。

_base.scss：

$color: red !default;

.button {
    background-color: $color;
}

test.scss：

$color: blue;
@import 'base';

编译输出：

.button {
    background-color: blue;
}

【讨论】：