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

我在VS代码中使用，每当我使用从另一个文件导入变量时，它都会抛出编译错误。但是，当我使用Sass命令行界面（

Sass--watch

）编译文件时，它不会抛出任何错误

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

复制步骤 文件结构和代码 这是我在VS代码中打开的名为

sass test

的文件夹的文件结构：

sass-test
|   style.scss
|   _variables.scss

style.scss

@使用“变量”；
html{
颜色：变量。$primaryColor；
}

\u variables.scss

$primaryColor:#ff0000；

实时Sass编译器输出 在VS代码的新选项卡中打开

style.scss

。然后，单击窗口右下角的“监视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编译器扩展中的错误引起的？非常感谢

两天前我有同样/类似的问题

@use是新的官方版本“Dart Sass”中引入的一个新指令，它取代了现在被去除润滑的“@import”

VS代码中流行的扩展“Live Sass编译器”在一段时间内不再受维护人员支持。所以不幸的是，Sass版本没有在该扩展中更新

在“Dart Sass”的VS代码中，我找到了扩展名“DartJS Sass编译器”：

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

更新

除了上述报告的使用实际Sass版本的exentsion

DartJS Sass编译器

之外，我还发现了一个实现和实际维护的

Live Sass编译器的分支

。它已经被深深地隐藏在搜索引擎中。由于它是VS代码中一个非常流行的扩展，因此此处指向fork的链接：

备注:

我对两个分机都很傲慢。两者都做得很好，都有优势

“DartJS Sass编译器”还可以提供更详细的输出，如有关Sass版本和监视程序的信息。除了包含的SASS版本之外，如果安装到您的系统或项目的本地，它还允许使用您自己的SASS版本。因此，维护人员对更新的依赖性不强

“实时Sass编译器”随附带的Sass版本开箱即用。由于它是VS代码中非常流行的扩展，因此有一个特殊的优势：它似乎可以使旧项目中的设置保持运行

---

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

您的语法完全正确。是编译器。它可能仍在节点Sass上运行，而您的CLI已使用Dart Sass。谢谢！只是一个简短的问题，节点Sass和Dart Sass之间的区别是什么？Dart Sass是否支持

@use

语法，而Node Sass不支持？Dart Sass是Sass的维护版本，并接受所有新功能，如

@use

，而Node Sass是无润滑的，不支持。请参阅Simplicius提供的信息。