Visual Studio Express 2013 Web Essentials 中的 SCSS 编译错误

Posted 2023-03-05

【中文标题】Visual Studio Express 2013 Web Essentials 中的 SCSS 编译错误

【英文标题】：SCSS compile error in Visual Studio Express 2013 Web Essentials

【发布时间】：2014-08-21 06:55:42

【问题描述】：

我正在尝试让 Sass 使用 Web Essentials 在 Visual Studio Express 2013 for Web 中工作。当我包含最基本的 scss 文件时，出现编译错误。这是我的示例文件：

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body 
  font: 100% $font-stack;
  color: $primary-color;

我得到的错误是： 发生编译错误（请参阅错误列表以导航到错误位置）： 发现错误：

但是，Visual Studio 的错误列表中的错误是空白的，仅显示第 1 行第 1 列，没有更多信息。我在 scss 文件中的内容也无关紧要，即使只有带有左括号和右括号的 body 标记也会出现相同的错误。

VS 版本是：12.0.30501.00 with Web Essentials 2.2

任何帮助将不胜感激。谢谢！

【参考方案1】：

Sass + Web Essentials 不允许重命名文件，它们开始抛出编译错误。请检查您没有重命名它。或者您可以复制文件的内容，将其删除并使用旧内容创建新文件。一切都会好起来的。

其他原因可能是您签入源代码后的文件处于只读状态，并且 Saas 编译器无法自动将其签出，因此您需要使用 *.scss 从文件夹中取消选中只读标志 - 或者只是签出以进行编辑来自 TFS。

今天我找到了另一个原因——sass 缓存。可以从这里删除 - C:\Users\%Username%\AppData\Local\Temp\

【讨论】：

这对我有帮助。我将现有的 css 文件重命名为 SCSS，这引发了错误。现在我创建了一个新的 SCSS 文件，保持 css 不变，一切正常，并且替换了现有的 css。

【参考方案2】：

在我的情况下，这是由于包含的 .scss 文件本身试图包含另一个 .scss 文件，该文件在目录层次结构中太深，node-sass 无法处理。我通过调试 Web Essentials 并劫持对 node-sass 的调用来隔离导致问题的文件，以查看真正的错误输出：

D:\Path\Assets\Areas\Area\/Section/section.scss:1: error: file to import not found or unreadable: '../../../Shared/Mixins/buttons.scss'

根据我最终偶然发现的this issue，将./ 添加到第二个包含文件的路径解决了我的问题。例如：

@include './../../../Shared/Mixins/buttons.scss';