如何在Visual Studio 2017中编译less/sass文件

Question

在VS <= 2015中,我们可以使用WebEssentials扩展,负责为我们编译less/sass文件,但目前它不支持VS 2017.您是否知道类似的扩展可以编译更少/ sass在构建？

Answer 1

WebEssentials正在分成多个扩展.我相信您想要的功能现在是Web编译器扩展.

如果你想在没有扩展的情况下这样做,你可以使用像Gulp这样的任务运行器.请参阅此处,了解如何将Gulp任务集成到VS中.

Answer 2

更新 - 请仔细阅读本页,因为我已经添加了一个额外的答案(这一点没有更长的时间为我工作).

对于像我这样不了解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顺便进行此扩展 - 任何避免学习新东西的东西......

Answer 3

简单回答:

• 编译LESS和SASS文件:Web编译器或Web Essentials 2017(包括许多扩展)
• 只编译SASS(SCss)fiels:CompileSass
• 只编译LESS文件:LESS编译器

Answer 4

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

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

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

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

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