7

我正在使用 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 的新手，但这肯定是可能的吗？

4

2 回答 2

7

这在 GitHub 上的 Web 编译器上作为问题提交： @use 不起作用

回应是：

@use 目前仅受 dart-sass 支持，其他平台暂时使用 @import，因此这不是 Web 编译器问题

我也是 Sass 的新手，我不知道如何判断 Web 编译器支持哪个版本的 Sass。（编辑：刚刚发现SO问题我的WebCompiler扩展使用的是哪个版本的SASS？）

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

于 2019-12-12T23:27:45.660 回答
1

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

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

_base.scss：

$color: red !default;

.button {
    background-color: $color;
}

测试.scss：

$color: blue;
@import 'base';

编译输出：

.button {
    background-color: blue;
}
于 2019-12-12T01:04:22.650 回答