css - 如何使用 Visual Studio 2019 编译 Dart Sass

Question

到目前为止，我使用 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 编译器，但得到相同的编译错误：

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

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

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

score 1 · Accepted Answer

Visual Studio 尚不支持 sass dart。

请在这里投票支持 sass 飞镖：

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

score 0 · Accepted Answer

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

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

score -1 · Accepted Answer

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

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

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

3 回答 3