【发布时间】: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