sass - 使用从另一个 scss 文件 (@use) 导入的变量时，Scss(实时 scss 编译器)会引发错误

Question

这是一个我完全不明白的奇怪错误。我通常会先搜索并寻求答案，然后再将其发布到 StackOverflow 上。所以问题是我想使用从另一个名为 的 scss 文件中导入的变量。 _variables.com 使用 @使用 .这是写在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 Compiler

我遇到了完全相同的问题。您阅读了 @use 在SASS官网上，按照说明，在Visual Studio Code中编写代码，然后你得到这个奇怪的Compilation Error保存 SASS 或 SCSS 文件时。你仔细检查了一切，看起来它应该可以工作，但它没有。
好吧，问题是由您用于将 SASS 或 SCSS 文件编译为 CSS 文件的 Visual Studio Code 扩展引起的。
不要使用这个扩展:Ritwick Dey 的 Live Sass Compiler
您可能正在使用此扩展程序:Live Sass Compiler by Ritwick Dey .
它被广泛使用，但作者不再支持。因此，SASS 版本没有更新。此扩展程序会产生您所描述的错误，如下所示。

使用这个扩展:Glenn Marks 的 Live Sass Compiler
你应该使用这个扩展:Live Sass Compiler by Glenn Marks .正如作者所说:非常感谢@ritwickdey 所做的所有工作。但是，由于他们不再维护原始作品，因此我发布了基于它的自己的作品。此扩展程序成功地将您的 SASS 或 SCSS 文件编译为 CSS 文件，如下所示。