Sass编译失败 - Web Essentials 2013 更新4

Question

我目前正在使用Web Essentials 2013更新4，在Visual Studio中提供对编译.scss文件的支持。

该工具过去一直为我提供很好的支持，但是我刚刚创建了一个新的.scss文件，并将未压缩的bootstrap css复制到这个新文件中。

保存后，屏幕右侧的编译窗口未能更新或显示已编译的css或任何错误消息。同时，我Visual Studio屏幕底部的蓝色条一直卡在

为bootstrap.scss编译0个依赖文件

通常，我期望会从此生成一个bootstrap.css文件和一个bootstrap.min.css文件，但事实并非如此。

有人有想法如何恢复正常工作状态吗？

- jezzipin

---

这些绿色的勾勾是什么意思？你在VS中实现了Git的源代码控制了吗？如果是，怎么做的？ - Zameer Ansari

Answer 1

这个问题与我在WebEssentials-Settings.json文件中的设置有关。在版本3中，“UseRubyRuntime”参数需要标记为true才能自动编译成相关文件。自从版本4以来，可以将其标记为false，因为WE现在已经内置了编译器，我相信这可能会与我尝试使用的RubyRuntime版本产生冲突。

- jezzipin

---

将UseRubyRuntime设置为“true”似乎已经解决了这个问题，它使用的是Ruby Sass而不是Libsass。我想知道Libsass版本的潜在问题是什么。 - Makotosan

感谢@jezzipin的回答。 - Dejan Munjiza

Answer 2

我遇到了类似的问题，安装了Web Essentials 2013 Update 4之后，.scss文件开始向输出窗口抛出如下错误：

Something went wrong reaching: ... 
SCSS: Site.scss compilation failed: The service failed to respond to this request
Possible cause: Syntax Error!

对我来说唯一的解决方案是：

1. 卸载Web Essentials
2. 删除%AppData%\Local\Microsoft\VisualStudio\12.0
3. 删除%AppData%\Roaming\Microsoft\VisualStudio\12.0
4. 修复VS 2013.4
5. 重新安装Web Essentials

来源：https://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361/view/Discussions/1#15143

另外需要注意：如果导入其他的.scss文件，请确保它们在正确的位置。当我通过NuGet更新Twitter.Bootstrap.Sass 3.3.3时，相关的.scss文件被移动到了另一个文件夹，我必须更新引用。例如：

之前：

@import "../sass/bootstrap/_utilities.scss";

之后：

@import "../stylesheets/bootstrap/_utilities.scss";

- bubbassauro

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Paul Knopf

很简单地结束nodejs.exe进程对我而言有效，如果有其他人遇到同样的问题可以尝试这种方法。 - Jake

Answer 3

我曾经遇到过同样的问题，花费了一些时间卸载和重新安装Web Essentials。我试图删除与Web Essential相关的AppData部分，但无法成功编译scss文件。

所以我创建了一个新的.scss文件，内容较少，可以成功编译。然后我开始从失败的文件中复制碎片。复制了几次之后，新文件也失败了。我能够找到失败的原因。

它是由这行代码引起的：

$highlightcolor: #67a0f;

你看到问题了吗？十六进制颜色代码缺少一个数字。它应该是67a0f5。修复这个问题解决了原始文件的问题。

我已经检查了这个文件是否有语法错误，但没有发现短的颜色定义。

希望这篇文章能为某些人节省时间和挫败感。

- Dave

---

虽然任何数量的解析错误都可能导致“我的东西无法编译”，但这并不能真正回答问题。 - cimmanon

Answer 4

我曾遇到同样的问题。为了帮助诊断，我创建了一个包含虚拟CSS规则的最小化.scss文件 - 它生成了相同的错误。

然后我打开我的长期测试和完全工作的旧.scss文件 - 它也生成了相同的错误。我认为这里有些问题。

经过一段时间的尝试修补问题，不知怎么的，通过关闭Visual Studio，重新加载并重新打开解决方案来解决了该问题。

- Emanuele Ciriachi

---

关闭/重新打开VS在SCSS文件上出现“node未被识别...”消息导致无法编译时帮助了我。 - Fillip Peyton

Answer 5

我曾经遇到过这个问题，并确定当我运行编译所有SASS文件时，插件试图编译项目中/obj目录中找到的文件，但失败了，因此导致后续编译失败。删除/obj目录并重新启动VS可以解决这个问题。

- James Ellis-Jones

Answer 6

我也遇到了同样的问题，已经排除了实际语法错误和不正确的路径引用。 我发现了关于此事情的两件事。

1. 当一个文件只指定变量而没有实际的scss或css标记时，会出现这种情况。 这更像是一种hack，因为您可能需要在变量文件中放入不需要的css。
2. 关闭Autoprefixer将完全解决此问题，但代价是不能使用此功能。

- Stacey Schlenker

Answer 7

参考更新日志，截至Web Essentials的2.5版更新4：

• 移除所有基于node.js的工具 ◦Sass/LESS编译器 JSHint/JSCS
  linters CSS AutoPrefixer Handlebars编译器 SweetJS/LiveScript
  编译器

http://vswebessentials.com/changelog

所以我的理解是，它不再编译。

- Jusuchin

---

根据开发者的说法（https://github.com/madskristensen/WebEssentials2013/issues/1716#issuecomment-69952105），看起来变更日志中的那个注释只适用于Web Essentials 2015版本，不会影响WE 2013。 - Adaline Simonian

Answer 8

从其他人对Web Essentials的评论中可以得知，查看更改日志，它说明对于版本2013更新4及更高版本（也就是版本2015），

重要！LESS、Sass和CoffeeScript的捆绑、压缩和编译不再是Web Essentials 2015的一部分。请安装新的扩展程序Bundler & Minifier和Web Compiler。此外，请参阅其他可能对您有兴趣的Web开发扩展程序列表。

我找到了一个很棒的Visual Studio扩展程序，可以在保存SCSS文件时将其编译为CSS文件（并对该文件进行缩小）。

你可以在这里获取它。 创建这个扩展的人也谈到了Web Essential问题，可以在这里找到。

- Rob Scott

---

我也看到了这个通知，但它是误导性的 - Less/Sass/Scss编译仍然存在于Web Essentials 2013.4和2013.5中。http://i.imgur.com/jy5Z3Uc.png - Chris Moschini

Answer 9

我曾经遇到过类似的问题，结果发现是在声明SASS变量之前引用了它。没有任何警告或错误提示。一旦我把引用放到正确的位置，一切都正常了。

- Marcelo Calbucci