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

Question

我正在使用 Live Sass Compiler v3.0.0 in my VS Code and it throws a compilation error whenever I use the @use rule 从另一个文件导入变量。但是，当我使用 Sass 命令行界面 (sass --watch) 编译我的文件时，它会抛出 no errors.

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

重现步骤

文件结构和代码

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

sass-test
|   style.scss
|   _variables.scss

style.scss

@use "variables";

html {
  color: variables.$primaryColor;
}

_variables.scss

$primaryColor: #ff0000;

实时Sass编译器输出

在 VS Code 的新选项卡中打开 style.scss。然后，点击window右下角的“观看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。编译器编译成功，没有任何错误：

Compiled style.scss to style.css.

Sass is watching for changes. Press Ctrl-C to stop.

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

Answer 1

两天前我遇到了 same/similar 个问题。

@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 中非常流行的扩展，所以 link 到分叉：

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

备注：

两个扩展我都玩过。两者都做得很好，各有优势。

'DartJS Sass Compiler' 有更多的可能性输出更详细的信息，比如关于 sass 版本和观察者的信息。除了包含的 SASS 版本之外，如果安装到您的系统或本地到您的项目，它还允许使用您自己的 SASS 版本。因此 no/less 依赖于维护者的更新。

'Live Sass Compiler' 开箱即用，包含 sass 版本。由于它是 VS Code 中非常流行的扩展，因此有一个特殊的优势：它似乎将您的设置保留在旧项目中运行.

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

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

Live Sass Compiler - @use causes compilation error

compiler-errors

sass

visual-studio-code

重现步骤

文件结构和代码

实时Sass编译器输出

Sass CLI 输出