无法让 Chrome 检查器链接到从 Web Essentials 生成的 SCSS 源映射文件答案

【问题标题】：Unable to get Chrome inspector to link to SCSS source map file generated from Web Essentials无法让 Chrome 检查器链接到从 Web Essentials 生成的 SCSS 源映射文件
【发布时间】：2016-02-20 20:44:23
【问题描述】：

我正在尝试让 Chrome 的开发人员工具识别和使用我的 scss 地图文件，以便我可以更轻松地调试我的 scss 样式。由于某种原因，Chrome 似乎没有使用 styles.css.map 文件，因此它仅在检查器中向我显示生成的 css 样式而不公开 scss 文件。

我正在使用的工具：

视觉工作室 2013
网络要领
IIS
铬

当前配置：

web Essentials sass 编译配置为生成 css 和 css.map 文件，并且似乎工作正常。 css 和 map 文件与 scss 文件在同一目录中生成，并在保存时更新。 view my web essentials settings here
chrome 设置被设置为启用 css 源映射并自动重新加载生成的源映射 view chrome settings here

文件结构

我已经设置了一个非常简单的文件结构来尝试缩小问题范围并消除我的主应用程序可能引入的任何额外复杂性：

/index.html
/styles.css
/styles.scss
/styles.css.map

更新 1：

我操作了 url 以查看是否可以直接访问文件，看起来 styles.css.map 文件可用，但 styles.scss 文件不可用。所以我猜VS或IIS没有提供这些文件。我猜这是因为需要在 IIS 或 VS 中进行一些配置？

更新 2：

我发现需要在 Visual Studio 或 IIS 中设置 mime 类型才能识别 scss 文件类型。我在我的 web.config 中进行了设置，现在它完全可以在 FireFox 中运行，但由于某种原因仍然无法在 Chrome 中运行。但是如果我直接通过 url 访问它们，我可以访问所有 .map 和 .scss 文件。现在我需要弄清楚为什么这在 chrome 中不起作用。

【问题讨论】：

我会看看源映射是否在另一个浏览器（如 firefox）中工作，看看它们是否在那里工作。如果他们这样做，那么这是一个 Chrome 问题，如果他们不这样做，那么你的构建配置有问题。我这样说是因为看起来您可能已经正确设置了 Chrome，这使它看起来像是构建的问题。
谢谢，我在 Firefox 中尝试过，它在检查器中显示了 styles.scss，所以它看起来像它的工作。但是当我单击链接查看实际文件时，它只会显示 404 错误页面的代码。所以我想不知何故该文件不可用。我想知道 IIS 是否没有提供源文件，因为它们实际上并没有在项目中被引用？我对 Visual Studio 和 IIS 不是很擅长，因此非常感谢该领域的任何输入
老实说，如果您刚刚开始使用预处理器/构建工具，那么学习/处理的东西真的足够了，这样您可能也不需要您的编辑器妨碍您。我建议选择重量更轻的东西——比如 Atom 或 Sublime Text。从那里开始，您可能想研究使用 gulp 进行简单构建，然后最终转向 Webpack 之类的东西。老实说，构建工具已经变得如此出色，以至于我敢打赌，大多数专业人士不会使用像 Visual Studio 或 WebStorm 这样的重型 IDE。
@Pytth 我正在与 Microsoft 开发团队合作一个更大的项目，所以我没有这个选项。
啊。好吧，对于前端开发，我不明白为什么你不能想出自己的简单构建文件来处理 SASS 和源映射。这是处理我的 sass 和源映射的 gulp 任务的示例：（将其放入格式化代码的答案中）。

标签： css iis visual-studio-2013 sass web-essentials

【解决方案1】：

这是我的 gulp 文件的示例。即使您在一个大团队中，对于诸如 sourcemap 和 sass 之类的小事情，我也很难理解为什么您不能跳出 IDE 来做这些事情。

//'required' in everything above.
gulp.task('sass', function() {
    gulp.src('server/src/styles/index.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(concat('styles.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./server/tmp'));
});

要运行任务，我可以从我的终端运行gulp sass。当然，我的 FULL 版本还有其他东西，比如浏览器同步自动前缀、gulp watch 等。所有非常好的东西，设置起来并不难。

【讨论】：

不能使用其他编辑器。我还需要能够执行/调试后端任务。不过谢谢
您可以使用与 gulp 相同的编辑器。在我的上一份工作中，我们都使用了 WebStorm，但仍然在 IDE 本身之外进行了单独的构建。

【解决方案2】：

我终于解决了这个问题！在工具 > 选项 > Web Essentials > SASS 中，我将“使用 Ruby 运行时”设置为 True，它可以工作！

【讨论】：

【解决方案3】：

看起来您可能已经想通了，但要具体一点 - 将以下内容添加到 web.config。

<staticContent>
 ...
 <mimeMap fileExtension=".scss" mimeType="text/css" />
 ...
</staticContent>

【讨论】：