【问题标题】:Live Sass Compiler - @use causes compilation errorLive Sass 编译器 - @use 导致编译错误
【发布时间】:2021-05-17 11:05:03
【问题描述】:

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

因此,我想问一下这是我的代码中的语法错误还是 Live Sass Compiler 的错误引起的。

复制步骤

文件结构和代码

这是我在 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。然后,单击位于窗口右下方的“Watch Sass”按钮。 Live Sass Compiler 会输出以下错误:

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 Compiler 扩展中的错误引起的?

【问题讨论】:

  • 您的语法完全正确。是编译器。它可能仍在 Node Sass 上运行,而您的 CLI 已经使用 Dart Sass。
  • 谢谢!只是一个简短的问题,Node Sass 和 Dart Sass 有什么区别? Dart Sass 是否支持 @use 语法而 Node Sass 不支持?
  • Dart Sass 是 Sass 的维护版本,并接收了所有新功能,例如 @use,而 Node Sass 已被贬低并且没有。
  • Here is the official source 获取 Simplicius 提供的信息。

标签: visual-studio-code sass compiler-errors


【解决方案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

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

更新

除了上面报告的exentsion DartJS Sass Compiler 和实际的SASS 版本之外,我还发现了Live Sass Compiler 的一个实际维护的分支。它已经深深地隐藏在搜索结果中。因为它是 VS Code 中非常流行的扩展,所以这里是 fork 的链接:

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

备注:

我用这两个扩展玩了arround。两者都做得很好,各有优势。

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

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

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

【讨论】: