Question

我正在尝试让Chrome的开发者工具识别并使用我的scss地图文件，以便我可以更轻松地调试我的scss样式。由于某些原因，Chrome似乎没有找到styles.css.map文件，所以仅显示检查器中生成的css样式而不暴露scss文件。< / p>

我使用的工具：

visual studio 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文件。现在我需要弄清楚为什么这不起作用。

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 build还有其他东西，比如浏览器同步autoprefixer，gulp watch等等。所有非常好的东西都不是很难设置。

Answer 2

我终于找到了问题！在工具＆gt;选项＆gt; Web Essentials＆gt; SASS，我将“使用Ruby Runtime”设置为True，它可以工作！

Answer 3

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

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

无法让Chrome检查器链接到从Web Essentials

3 个答案: