Scss（实时 scss 编译器）在使用从另一个 scss 文件导入的变量时抛出错误（@use）

Question

这是一个我根本不明白的奇怪错误。我通常会先搜索并寻求答案，然后再将其发布到 StackOverflow 上。所以问题是我想使用从另一个名为_variables.com的 scss 文件中使用@use导入的变量。这是写在scss-lang.com@use中的。我尝试使用变量的方式：

_variables.scss
$secondary-color: #CEA44A;

style.scss
@use '../../variables';

.foo {
  background-color: variables.$secondary-color;
}

// ERROR TEXT
Invalid CSS after "...olor: variables": expected expression (e.g. 1px, bold), was ".$secondary-color;"
on line 19 of sass/c:\Users\Amirreza Amini\Desktop\blog\src\Components\Register\Register.scss
background-color: variables.$secondary-color;

Answer 1

使用 Glenn Marks 的 Live Sass 编译器

我有完全相同的问题。您@use在SASS官方网站上阅读了相关内容，按照说明进行操作，在Visual Studio Code中编写代码，然后Compilation Error在保存SASS或SCSS文件时您会遇到这种奇怪的情况。您仔细检查了所有内容，看起来它应该有效，但事实并非如此。

嗯，问题是由您用于将 SASS 或 SCSS 文件编译为 CSS 文件的 Visual Studio Code 扩展引起的。

不要使用此扩展：Live Sass Compiler by Ritwick Dey

您可能正在使用此扩展：Ritwick Dey 的 Live Sass Compiler。它被广泛使用，但作者不再支持。因此，SASS 版本不会更新。此扩展会产生您所描述的错误，如下所示。

使用此扩展：Glenn Marks 的 Live Sass 编译器

您应该使用此扩展：Glenn Marks 的 Live Sass Compiler。正如作者所说：非常感谢@ritwickdey 所做的所有工作。然而，由于他们不再维护原来的作品，我已经发布了我自己的作品，这是建立在它的基础上的。此扩展可将您的 SASS 或 SCSS 文件成功编译为 CSS 文件，如下所示。