Scss(实时 scss 编译器)在使用来自另一个 scss 文件的导入变量时抛出错误(@use)

Scss (live scss compiler) throws an error when using the imported variables from another scss file (@use)

这是一个我完全不明白的奇怪错误。我通常在将其发布到 Whosebug 之前搜索并寻找答案。所以问题是我想使用我从另一个名为 _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;

@use '../../variables';更改为@use '../../variables' as *;

使用 Glenn Marks 的 Live Sass 编译器


我遇到了完全相同的问题。你在SASS官方网站上看到了@use,按照说明,在Visual Studio代码中编写代码,然后在保存SASS时得到这个奇怪的Compilation Error或 SCSS 文件。您仔细检查了所有内容,看起来它应该可以工作,但实际上没有。

好吧,问题是由您用于将 SASS 或 SCSS 文件编译为 CSS 文件的 Visual Studio 代码扩展引起的.

不要使用此扩展:Live Sass Ritwick Dey 的编译器

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

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

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