如何在 Visual Studio 2017+ 中编译 Less/Sass 文件

Posted 2023-03-06

【中文标题】如何在 Visual Studio 2017+ 中编译 Less/Sass 文件

【英文标题】：How to compile Less/Sass files in Visual Studio 2017+

【发布时间】：2017-08-01 05:59:16

【问题描述】：

在 VS

【参考方案1】：

WebEssentials 被拆分为多个扩展。我相信您想要的功能现在在 Web Compiler 扩展中。

如果您想在没有扩展的情况下执行此操作，则可以使用 Gulp 之类的任务运行器。有关如何将 Gulp 任务集成到 VS 中的演练，请参阅 here。

【讨论】：

我在 VS 2019 中使用 Web 编译器作为扩展来帮助编译一些非常旧的 .less 文件，它仍然可以正常工作。

注意：Web 编译器已被废弃，上次更新是 5 年前。有一些未解决的问题，但有点工作。

Web 编译器在 VS 2019 中为我工作，但它不会自动重新编译 .less 开箱即用。您必须手动运行一次编译（请参阅this answer）才能创建 compilerconfig.json 文件。之后，它将自动重新编译 .less 文件。

【参考方案2】：

更新 - 请阅读此页面，因为我添加了一个附加答案（这似乎不再适合我）。

对于像我这样不知道 Gulp 或 Grunt 或 Shriek 或 Wail 并且不想知道的人，您可以让 Visual Studio 2017 自动编译您的 SCSS 文件，就像在 Visual Studio 中一样2015。以下步骤对我有用。

首先卸载 Web Compiler 的所有旧扩展/Nuget 包（我不知道这是否必要）。

转到VSIX gallery download page 并选择下载Web Compiler。

请注意，我首先通过在 Visual Studio 中选择 Tools / Extensions and Updates 来完成此操作。尽管这似乎可行，但我发现当我对它们进行更改时，我的部分 SCSS 文件并没有被自动编译为 CSS（我 wasn't the only one）。

您现在应该能够右键单击您的主 SCSS 文件并选择下面显示的选项，这应该会在您的项目的根目录中自动创建一个名为 compilerconfig.json 的文件（此步骤如果您已经拥有此文件，则可能不需要）：

从那时起，一切似乎都正常。呸！顺便感谢 Mads Kristensen 的这个扩展 - 任何可以避免学习新东西的东西......

【讨论】：

我不明白这个评论！不确定哪个是公认的答案，但没有一个与我给出的答案相似。

接受的答案是带有绿色勾号的那个。目前它拥有最多的支持，它建议使用相同的 Web 编译器扩展。无论如何，因为图片，我喜欢你的回答。

谢谢。我的回答给出了一个不使用 Gulp/Grunt 的解决方案，并且还提供了人们需要的额外细节。我查看了勾选的答案（除其他外），但如果没有上面的额外信息，它并没有解决我的问题 - 因此我努力发布，只是为了避免其他人浪费我试图解决这个问题的时间.

尝试阅读接受的答案，它说的是同一件事，但也建议如何使用 Gulp

好的，我现在看到接受的答案确实说了同样的话 - 所以我的只是添加了更多细节。希望像我这样的懒惰读者会发现这很有用！

【参考方案3】：

简单回答：

编译 LESS 和 SASS 文件：Web Compiler 或 Web Essentials 2017（包括许多扩展） 仅编译 SASS (SCss) 字段：CompileSass 仅编译 LESS 文件：LESS Compiler

【参考方案4】：

我之前的答案为我工作了几个月，但现在不再有效。当我尝试编译时，我在错误窗口中收到一条关于 CompilerConfig 架构问题的消息，但无法解决这个问题（谷歌搜索和安装/卸载都没有帮助）。

因此，另一种答案是使用CompileSASS，这是一个更简单的插件，在线文档少得多，但效果很好。我能看到的唯一缺点是：

生成的 CSS 与 SCSS 位于同一文件夹中，因此我不得不在我的网站中移动一些内容以适应这种情况；和 据我所知，生成的 CSS 只是被缩小了

安装插件后（我使用的是 VS 2017），您可以进入工具 > 选项更改设置：

希望我现在可以恢复工作！顺便说一句，感谢所有插件作者 - 不要抱怨。

【讨论】：

幸好这次我一直滚动。我正要关注你的上一个。回答。如果您认为答案不再有效，也许您应该用注释更新它。 :)

工作就像一个魅力。非常感谢。

如果您已经拥有 Web 编译器并且遇到了本文中描述的相同错误，请在此处查看我的帖子：***.com/a/55290276/3609362github.com/madskristensen/WebCompiler/issues/…

我刚刚下载了 Visual Studio 2019 的 Web 编译器，到目前为止它运行良好。是否存在特定于 Visual Studio 2017 的问题？

【参考方案5】：

现在还有一个不太具体的编译器。 https://github.com/madskristensen/LessCompiler

【讨论】：

我下载并安装了扩展。然后我打开了我的 Site.less 文件，我可以看到水印在哪里可以在编译器上调整。然后我在我的网站上进行了构建，并以调试模式打开它。当我打开 Site.less 下的 Site.css 时，它上面有 Generated watermak。然后我尝试搜索新添加的属性，但它不存在并且我没有得到我的 CSS。关于如何获得它来构建我的 LESS 的任何想法？