如何使用 Visual Studio 2019 编译 Dart Sass

直到现在我使用 Mads Kristensen 的 Web Compiler，但现在我在编译新的 sass 命令（如 @use）或使用一些 css 计算（如

）时遇到问题

grid-template-columns:repeat(auto-fill,minmax(max(200px,(100% - (var(--n) - 1)*10px)/var(--n)),1fr));

我发现了一个新的 sass 实现：Dart Sass 但在 Visual Studio 中没有找到任何扩展来管理它，只有一些用于 Visual Studio 代码

Web 编译器上次更新是在 2018 年

我也尝试 Sass compiler 但得到相同的编译错误：

200px,(100% - (var(--n) - 1)*10px)/var(--n) 不是最大的正确值

即使它是纯粹的工作 css，也许它太新了，编译器无法识别它

目前唯一的方法是将该规则放在纯 css 文件中，然后将其与 sass 生成的 css 一起导入，但似乎不是一个好的解决方案

Visual Studio 尚不支持 sass dart。

请在这里为 sass dart 支持投票：

您可以使用 npm 包使用 sass dart 构建 scss 文件，并使用 npm 脚本或 javascript 与 Visual Studio 的任务运行器集成，但您仍然会在 Visual Studio 的代码编辑器中收到语法错误。

您可以通过命令行安装 dart-sass：npm i dart-sass sass-watch

然后通过 gulpJs 定义一个任务 --> Install gulpJs

更新
此答案中建议的扩展不在 Visual Studio 中运行，而仅在 Visual Studio Code 中运行。因此，此答案中建议的解决方案无法按照问题中的要求工作。感谢@gt.guybrush 的反馈以澄清这一点！

使用 @use 仅包含在最实际的编译器扩展中。

或者使用此版本，您可以在系统上使用自己的 SASS 安装：
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

相关问答