gulp sourcemaps 不指向 sass 而是指向 css答案

【问题标题】：gulp sourcemaps not pointing to sass but cssgulp sourcemaps 不指向 sass 而是指向 css
【发布时间】：2016-02-24 14:24:02
【问题描述】：

我有这个 gulp 设置

require('es6-promise').polyfill();

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var mmq = require('gulp-merge-media-queries');
var prefix = require('gulp-autoprefixer');

var sassOptions = {
    errLogToConsole: true,
    outputStyle: 'expanded'
};

var autoPrefixerOptions = {
    browsers: ['last 2 version', '> 1%', 'ie 9']
};

gulp.task('sass', function() {
    gulp.src('./scss/**/*.scss')
      .pipe(sourcemaps.init())
      .pipe(sass(sassOptions).on('error', sass.logError))
      .pipe(mmq())
      .pipe(prefix(autoPrefixerOptions))
      .pipe(sourcemaps.write('../maps', {includeContent: false, sourceRoot: '../../ui-dev/scss'}))

      .pipe(gulp.dest('../Content/v2.0'));
});

gulp.task('watch', function() {
    gulp.watch('./scss/**/*.scss', ['sass']);
});

gulp.task('default', ['sass', 'watch']);

我的结构如下

|-Content
  |-maps
  |-v2.0
    |-- compiled css files here
|-dev
  |-gulpfile.js
  |-scss
    |-.scss files

一切都按预期构建，除了我的所有 .map 文件都引用 Content/v2.0 目录中的 .css 而不是 dev 文件夹中的 .scss 文件。

我理解的源映射是它应该指向原始文件中的行号（即 scss）以便于调试。

我该如何解决这个问题或者我错过了什么？

更新

所以我意识到我错过了 sourceRoute，但是因为我的 sass 被分解成几个级别深的目录中的数百个文件，浏览器仍然没有获取地图，因为路径读取“../../ui -dev/scss" 在所有地图中。

如何获取每个源文件的正确路径？

【问题讨论】：

所以在进一步搜索后我发现了这个 - stackoverflow.com/questions/34090352/… - 我认为这可能是我的问题，但我已经在 gulp-sass 版本 2.2.0 上。此外，gulpfile 看起来与我的非常相似，并且该答案被标记为正确。还有其他想法吗？
更多信息。我发现我的 gulp 设置中缺少一个步骤，因此对其进行了更新。我设置了sourceRoot。这给我留下了另一个需要解决的问题。

标签： gulp-sourcemaps

【解决方案1】：

我只是最终分别编译每个文件夹并像这样定义源的路径，直到找到更好的方法。

【讨论】：