Live Sass编译器-@use导致编译错误 [英] Live Sass Compiler - @use causes compilation error

问题描述

我正在使用 Live Sass编译器v3.0.0 我的VS代码，每当我使用 @use 时，它都会引发编译错误代码>规则从另一个文件导入变量.但是，当我使用Sass命令行界面( sass --watch )编译我的文件时，它会抛出没有错误.

I'm using Live Sass Compiler v3.0.0 in my VS Code and it throws a compilation error whenever I use the @use rule to import variables from another file. However, when I use the Sass command line interface (sass --watch) to compile my files, it throws no errors.

因此，我想问一下这是由于我的代码中的语法错误还是Live Sass编译器的错误所致.

Therefore, I want to ask is this caused by a syntax error in my code or a bug of Live Sass Compiler.

这是我在VS Code中打开的名为 sass-test 的文件夹的文件结构:

This is the file structure of the folder called sass-test that I opened in VS Code:

sass-test
|   style.scss
|   _variables.scss

style.scss

@use "variables";

html {
  color: variables.$primaryColor;
}

_variables.scss

$primaryColor: #ff0000;

Live Sass编译器输出

在VS Code的新标签页中打开 style.scss .然后，点击"Watch Sass"位于窗口右下角的按钮.Live Sass编译器将输出以下错误:

Live Sass Compiler Output

Open style.scss in a new tab in VS Code. Then, click the "Watch Sass" button located in the bottom right of the window. Live Sass Compiler would output the following error:

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 .编译器成功编译，没有任何错误:

Sass CLI Output

Open Terminal and run sass --watch style.scss:style.css. The compiler successfully compiles without any errors:

将style.scss编译为style.css.

Compiled style.scss to style.css.

Sass正在监视更改.按Ctrl-C停止.

Sass is watching for changes. Press Ctrl-C to stop.

由于我的代码可以使用Sass CLI成功编译，这是否意味着我的代码在语法上是正确的，并且是由Live Sass Compiler扩展中的错误引起的?非常感谢！

Since my code can compile successfully with Sass CLI, does it mean that my code is syntactically correct and it's caused by a bug from the Live Sass Compiler extension? Thanks a lot!

推荐答案

两天前我遇到了相同/相似的问题.

I had same/similar problem two days ago.

@use是新的官方版本"Dart Sass"中引入的新指令，它代替了现在已描述的"@import".

@use is a new directive introduced in the new official Version 'Dart Sass' and replaces '@import' which is depricated now.

在一段时间内，维护人员不再支持VS Code中流行的扩展'Live Sass Compiler'.因此很遗憾，该扩展名中未更新Sass版本...

The popular Extension 'Live Sass Compiler' in VS Code is not longer supported by the maintainer for some time. So unfortunately the Sass Version is not updated in that extension...

在"Dart Sass"的VS代码中，我找到了扩展名"DartJS Sass Compiler":
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

In VS Code for 'Dart Sass' I found the the Extension 'DartJS Sass Compiler':
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

实际上，我只是进行了快速测试，所以我无法对此进行过多报告.但是乍一看它运行良好.但是，由于它是另一个扩展，您可能必须更改一些设置.

Actual I just did a quick testing so I cannot report much about it. But on the first glance it is running well. But as it is another extension you may have to change some settings.

更新

除上述报告的具有实际SASS版本的扩展 DartJS Sass编译器之外，我还发现了 Live Sass编译器的已实现和实际维护的分支.它已经深深地隐藏在搜索重用中.因为它是VS Code中非常流行的扩展，所以在这里指向fork的链接:

Additional to the above reported exentsion DartJS Sass Compiler with actual SASS version I found an actualised and actual maintained fork of Live Sass Compiler. It has been deep hidden in the searching reuslts. As it is a very popular extension in VS Code here the link to the fork:

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

备注:

我在两个分机上都打过比赛.两者都做得很好并且有优势.

I played arround with both extension. Both are doing the job well and have advantages.

"DartJS Sass编译器"具有更详细的输出的附加可能性，例如有关sass版本和观察程序的信息.除了随附的SASS版本外，如果安装到您的系统或本地项目中，它还允许使用您自己的SASS版本.因此，维护者对更新的依赖不存在/较少.

'DartJS Sass Compiler' has the additional possibility for more detailed output like information about sass version and watchers. And additional to included SASS version it allows to use your own SASS version if installed to your system or locally to your project. So there is no/less dependency on updates by the maintainer.

'Live Sass Compiler'随带的sass版本开箱即用.由于它是VS Code中非常流行的扩展，因此具有一个特殊的优点:似乎可以使您在旧项目中运行的设置保持不变.

'Live Sass Compiler' runs out of the box with included sass version. As it is a very popular extension in VS Code there is a special advantage: it seems it keeps your settings in the old projects running.

我认为这都是很好的解决方案.

I think both are good solutions.

这篇关于Live Sass编译器-@use导致编译错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！