无法让 Chrome 检查员 link 到从 Web Essentials 生成的 SCSS 源映射文件

Question

我正在尝试让 Chrome 的开发人员工具识别和使用我的 scss 映射文件，以便我可以更轻松地调试我的 scss 样式。似乎 Chrome，出于某种原因，没有在 styles.css.map 文件上拾取，所以它只向我显示生成的 css 样式在检查器中并且不公开 scss 文件。

我使用的工具：

visual studio 2013
网络要点
IIS
chrome

当前配置：

web essentials sass 编译被配置为生成 css 和 css.map 文件并且似乎工作正常。 css 和地图文件在与 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.

中不起作用

Answer 1

这是我的 gulp 文件的示例。即使你在一个大团队中，对于像 sourcemaps 和 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 手表等。所有这些都非常好，设置起来也不是很困难。

Answer 2

终于找到问题了！在“工具”>“选项”>“Web Essentials”> SASS 中，我将 "Use Ruby Runtime" 设置为 True 并且有效！

Answer 3

看起来您可能已经解决了这个问题，但具体来说 - 将以下内容添加到 web.config。

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

无法让 Chrome 检查员 link 到从 Web Essentials 生成的 SCSS 源映射文件

Unable to get Chrome inspector to link to SCSS source map file generated from Web Essentials

css

iis

sass

web-essentials

visual-studio-2013