Live Sass 编译器 - @use 导致编译错误

Question

我在 VS Code 中使用Live Sass Compiler v3.0.0 ，每当我使用@use规则从另一个文件导入变量时，它都会引发编译错误。但是，当我使用 Sass 命令行界面 ( sass --watch) 编译我的文件时，它不会抛出任何错误。

因此，我想问一下这是由于我的代码中的语法错误还是Live Sass编译器的错误引起的。

重现步骤

文件结构和代码

这是我在 VS Code 中打开的文件夹的文件结构sass-test：

sass-test
|   style.scss
|   _variables.scss

样式.scss

sass-test
|   style.scss
|   _variables.scss

_变量.scss

@use "variables";

html {
  color: variables.$primaryColor;
}

Live Sass 编译器输出

style.scss在 VS Code 中的新选项卡中打开。然后，单击窗口右下角的“Watch Sass”按钮。Live Sass 编译器会输出以下错误：

Compiling Sass/Scss Files: 
d:\Web Development\sass-test\style.scss
--------------------
Compilation Error
Error: Invalid CSS after "  color: variables": expected expression (e.g. 1px, bold), was ".$primaryColor;"
        on line 4 of sass/d:\Web Development\sass-test\style.scss
>>   color: variables.$primaryColor;
   ------------------^

--------------------
Watching...
-------------------

Sass CLI 输出

打开终端并运行sass --watch style.scss:style.css. 编译器编译成功，没有任何错误：

将 style.scss 编译为 style.css。

Sass 正在观察变化。按 Ctrl-C 停止。

既然我的代码可以使用 Sass CLI 成功编译，这是否意味着我的代码在语法上是正确的并且是由 Live Sass 编译器扩展中的错误引起的？

Answer 1

两天前我遇到了相同/类似的问题。

@use 是新的官方版本“Dart Sass”中引入的新指令，取代了现已弃用的“@import”。

VS Code 中流行的扩展“Live Sass Compiler”一段时间以来不再受到维护者的支持。所以不幸的是 Sass 版本没有在该扩展中更新......

在“Dart Sass”的 VS Code 中，我找到了扩展“DartJS Sass Compiler”：
https://marketplace.visualstudio.com/items?itemName =codelios.dartsass

实际上我只是做了一个快速测试，所以我无法报告太多。但乍一看，它运行良好。但由于它是另一个扩展，您可能需要更改一些设置。

更新

除了上面报告的实际 SASS 版本的扩展之外，DartJS Sass Compiler我还发现了一个实际化且实际维护的Live Sass Compiler. 它已深深隐藏在搜索结果中。因为它是 VS Code 中非常流行的扩展，这里是分支的链接：

https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

评论：

我用两个分机都玩过。两者都做得很好并且各有优势。

“DartJS Sass Compiler”还可以提供更详细的输出，例如有关 sass 版本和观察者的信息。除了包含的 SASS 版本之外，如果安装到您的系统或项目本地，它还允许使用您自己的 SASS 版本。因此，对维护者的更新没有/更少的依赖。

“Live Sass Compiler”开箱即用，包含 sass 版本。由于它是 VS Code 中非常流行的扩展，因此有一个特殊的优点：它似乎可以让旧项目中的设置保持运行。

我认为两者都是很好的解决方案。