Question

我有这个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在目录中的数百个文件中分散了几层，浏览器仍然没有拿起地图，因为路径读取了＃34; .. /../ui-dev/scss"在所有地图中。

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

Answer 1

我最后分别编译了每个文件夹并定义了源代码的路径，直到找到更好的方法。

gulp sourcemaps没有指向sass而是css

更新

1 个答案: