Gulp sourcemaps gulp sourcemaps不指向sass,而是指向css

Gulp sourcemaps gulp sourcemaps不指向sass,而是指向css,gulp-sourcemaps,Gulp Sourcemaps,我有这个大口喝的装置 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 sa

我有这个大口喝的装置

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
除了所有my.map文件都引用Content/v2.0目录中的.css,而不是dev文件夹中的.scss文件之外,所有内容都按预期生成

我对源代码映射的理解是,它应该指向原始文件(即SCS)中的行号,以便于调试

我该如何解决这个问题,还是我遗漏了什么

更新 因此,我意识到我丢失了sourceRoute,但由于我的sass被分解在两个级别的目录中的数百个文件中,浏览器仍然无法获取地图,因为路径在所有地图中都显示“../../ui-dev/scss”


如何获得每个源文件的正确路径?

我只是分别编译每个文件夹,然后定义源文件的路径,直到找到更好的方法。

因此,在进一步搜索后,我发现了这个问题--我认为这可能是我的问题,但我已经在使用gulp sass 2.2.0版。此外,gulpfile看起来与我的非常相似,答案被标记为正确。还有其他想法吗?更多关于这个。我发现我的吞咽设置遗漏了一个步骤,所以更新了。我设置了sourceRoot。这给我留下了另一个需要解决的问题。