如何在Visual Studio 2017中编译更少/无效的文件

85

在VS <= 2015中，我们可以使用WebEssentials扩展名，该扩展名负责为我们编译less / sass文件，但当前它不支持VS2017。您是否知道类似的扩展名，可以在构建时编译less / sass？

— 米海尔·希什科夫（Mihail Shishkov）
source

104

WebEssentials被拆分为多个扩展。我相信您想要的功能现在位于Web编译器扩展中。

如果要在不扩展的情况下进行操作，则可以使用任务运行器，例如Gulp。有关如何将Gulp任务集成到VS中的演练，请参见此处。

— 吉米
source

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

— klewis

1

注意：Web Compiler已被放弃，最后更新是5年之前。有一些未解决的问题，但还可以。

— Alex

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

— neizan

49

更新-请阅读本页面，因为我已经添加了其他答案（这对我来说没有更多的工作可用）。

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

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

转到VSIX图库下载页面，然后选择下载Web编译器。

请注意，我首先通过在Visual Studio中选择“工具” /“扩展和更新”来完成此操作。尽管这似乎可行，但我发现对我的部分SCSS文件进行更改后，它们并没有自动编译为CSS（我不是唯一的）。

现在，您应该能够在你的主SCSS文件，右键单击并选择如下所示的选项，它会自动创建一个名为compilerconfig.json在你的项目的根（这一步可能是不必要的，如果你已经有此文件）：

从这一点开始，一切似乎都正常。！顺便感谢Mads Kristensen的扩展-避免学习新东西的任何方法...

— 安迪·布朗
source

6

我不明白这个评论！不确定哪个答案是可以接受的，但是没有一个与我给出的答案完全相似。

— 安迪·布朗

1

可接受的答案是带有绿色勾号的答案。当前，它的投票最多，建议使用相同的Web Compiler扩展名。无论如何，由于图片，我喜欢你的回答。

— 米哈伊尔·希什科夫

1

谢谢。我的答案给出了不使用Gulp / Grunt的解决方案，并且给出了人们需要的额外细节。我看了打勾的答案（包括其他答案），但是没有上面的额外信息，它并不能解决我的问题-因此，我为什么要努力发布帖子，只是为了避免其他人在我试图解决这个问题的同时浪费时间。

— 安迪·布朗

1

尝试阅读已接受的答案，这是在说同样的话，但也建议如何使用Gulp

— Keith Nicholas

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

— 安迪·布朗

8

简单答案：

同时编译LESS和SASS文件：Web Compiler或Web Essentials 2017（包括许多扩展名）
只编译SASS（SCss）字段：CompileSass
只编译LESS文件：LESS编译器

— 塞尔波山
source

5

我之前的答案对我有用了几个月，但现在不再起作用。尝试编译时，我在“错误”窗口中收到一条消息，提示有关CompilerConfig架构的问题，但无法解决（使用Googling或安装/卸载均无济于事）。

因此，另一种选择是使用CompileSASS，它是一个简单得多的加载项，并且在线文档少很多，但效果很好。我只能看到的缺点是：

生成的CSS与SCSS放在同一文件夹中，因此我不得不在网站中移动一些内容以适应此问题；和
据我所知，生成的CSS仅是最小的

安装加载项后（我使用的是VS 2017），可以进入“工具”>“选项”以更改设置：

希望我现在可以恢复工作！顺便说一下，感谢所有外接程序作者-并不是要抱怨。

— 安迪·布朗
source

1

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

— radbyx

像魅力一样工作。非常感谢。

— radbyx

1

如果你已经有了网络编译器和正面临着在这个职位描述的相同错误，请参阅我的文章在这里：stackoverflow.com/a/55290276/3609362 github.com/madskristensen/WebCompiler/issues/...

— 马特·摹

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

— 安迪·布朗

2

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

— 贾斯汀
source

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

— Caverman '17