Sass 编译失败 - Web Essentials 2013 Update 4

Question

我目前正在使用 Web Essentials 2013 update 4 来支持在 Visual Studio.

中编译 .scss 文件

该工具过去对我来说工作得很好，但是我刚刚创建了一个新的 .scss 文件并将 bootstrap 未缩小的 css 复制到这个新文件中文件。

保存后，屏幕右侧的编译 window 无法更新或显示编译的 css 或任何错误消息。同时，我 Visual Studio 屏幕底部的蓝色条卡在

Compiling 0 dependent file for bootstrap.scss

通常我希望从中生成一个 bootstrap.css 文件以及一个 bootstrap.min.css 文件，但这并没有发生。

有没有人知道如何将其恢复到正常工作状态？

Answer 1

这与我在 WebEssentials-Settings.json 文件中的设置有关。在版本 3 中，需要将 'UseRubyRuntime' 参数标记为 true 以使其自动编译到相关文件中。从版本 4 开始，这可以标记为 false，因为我们现在有一个内置的编译器，我认为它可能与我尝试使用的 RubyRuntime 版本冲突。

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!

对我来说唯一的解决办法是：

Uninstall Web Essentials

Delete %AppData%\Local\Microsoft\VisualStudio.0

Delete %AppData%\Roaming\Microsoft\VisualStudio.0

Repair VS 2013.4

Reinstall Web Essentials

Source: 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";

Answer 3

我遇到了同样的问题，花了一些时间卸载并重新安装 Web Essentials。我尝试删除 AppData 中似乎与 Web Essential 相关的部分，但都没有成功编译 scss 文件。

所以我创建了一个新的 .scss，其中包含最少的内容，并进行了编译。然后我开始复制失败的部分。几份后，新的也失败了。我能够将失败归零。这是由这条线引起的：

$highlightcolor: #67a0f;

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

我查看了文件以查找语法错误，但没有发现短颜色定义。

我希望这可以节省一些时间和挫败感。

Answer 4

参考更新日志，从 2.5 开始更新 Web Essentials 4：

Removed all node.js based tools ◦Sass/LESS compilers JSHint/JSCS
linters CSS AutoPrefixer Handlebars compiler SweetJS/LiveScript
compilers

http://vswebessentials.com/changelog

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

Answer 5

我有一个类似的问题，原来是对 SASS 变量在声明之前的引用。没有警告或错误。一旦我将引用移动到正确的位置，它就可以正常工作。

Answer 6

我遇到了同样的问题，并且已经消除了实际的语法错误和不正确的路径引用。我发现了两件事。

当有一个文件只指定变量和没有实际的 scss 或 css 标记。这更像是你的黑客可能必须将不需要的 css 放入变量文件中。
关闭 Autoprefixer 将完全解决问题，但代价是无法使用此功能。

Answer 7

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

然后我转到我的经过长期测试且完全正常工作的遗留 .scss 文件 - 它生成了相同的错误。我想这里有些不对劲。

在解决问题一段时间后，通过关闭 Visual Studio、重新加载并重新打开解决方案以某种方式解决了问题。

Answer 8

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

Answer 9

脱离其他人对 Web Essentials 的看法。查看 change log, it states that for versions 2013 update 4 及更高版本（也表示 2015 版），

Important! Bundling, minification and compilation of LESS, Sass and CoffeeScript is not longer part of Web Essentials 2015. Install the new extensions Bundler & Minifier and Web Compiler instead. Also, see this list of other web development extensions that might be of interest to you.

我发现了 visual studio 的这个精巧的小扩展，它在保存时将 SCSS 文件编译成 CSS 文件（连同该文件的缩小）。

你可以得到它here。创建此扩展的人也谈到了 Web Essential 问题，发现 here。

Sass 编译失败 - Web Essentials 2013 Update 4

Sass failing to compile - Web Essentials 2013 Update 4

sass

visual-studio

web-essentials

visual-studio-2013