实时 Sass 编译器 - @use 导致编译错误 [英] Live Sass Compiler - @use causes compilation error
问题描述
我正在使用 Live Sass 编译器 v3.0.0我的 VS 代码，每当我使用 @use rule 从另一个文件导入变量.但是，当我使用 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 Compiler的bug造成的.
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;
实时 Sass 编译器输出
在 VS Code 的新选项卡中打开 style.scss.然后，点击Watch Sass"按钮位于窗口的右下角.Live Sass Compiler 会输出以下错误:
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 Developmentsass-teststyle.scss
--------------------
Compilation Error
Error: Invalid CSS after " color: variables": expected expression (e.g. 1px, bold), was ".$primaryColor;"
on line 4 of sass/d:Web Developmentsass-teststyle.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?
推荐答案
两天前我遇到了相同/类似的问题.
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 Code 中，我找到了扩展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.
更新
除了上面报告的扩展DartJS Sass Compiler 和实际的SASS 版本之外，我发现了一个Live Sass Compiler 的实际化和实际维护的分支.它已经深深地隐藏在搜索结果中.因为它是 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 Compiler' 有额外的可能性来获得更详细的输出，比如关于 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.
这篇关于实时 Sass 编译器 - @use 导致编译错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
