CSS Sourcemaps 未加载答案

【问题标题】：CSS Sourcemaps not loadedCSS Sourcemaps 未加载
【发布时间】：2016-01-25 07:33:30
【问题描述】：

所以我有以下任务：

gulp.task('sass', function () {
    gulp.src(['./angular/app/**/*.s+(a|c)ss'])
        .pipe($.concat('app.css'))
        .pipe($.sourcemaps.init())
            .pipe($.sass({  includePaths: ['./angular/app/global'] }).on('error', $.sass.logError))
            .pipe($.if(gulpUtil.env.env === 'prod', $.uglify().on('error', onError)))
        .pipe($.sourcemaps.write('./'))

        .pipe(gulp.dest('public/css'))
        .pipe($.notify({
            title: 'Gulp',
            subtitle: 'success',
            message: 'sass compiled',
            sound: "Pop"
        }))
        .pipe($.livereload());
});

这就像它应该的那样工作，它会在 css 文件旁边生成地图文件。在css文件中，底线如下：

/*# sourceMappingURL=app.css.map */

但是 chrome 和 Firefox 会加载到该地图文件中。难道我做错了什么？还是有什么不工作？

尽管具有类似任务的 JS 文件确实在我的 devTools 的源选项卡中拆分了 js

【问题讨论】：

标签： css sass source-maps gulp-sourcemaps

【解决方案1】：

找到问题了，和concat冲突。

通过以下方式修复它：

var prefix = function () {
    var prefix = new Buffer("\n/* Added dynamically */\n", 'utf-8');

    return through.obj(function(file, enc, cb) {
        file.contents = Buffer.concat([prefix, file.contents]);
        this.push(file);
        cb();
    });
};

gulp.task('sass', function () {
    gulp.src(['./angular/app/**/*.s+(a|c)ss'])
        .pipe(prefix())
        .pipe($.sourcemaps.init())
            .pipe($.sass({  includePaths: ['./angular/app/global']}).on('error', $.sass.logError))
            .pipe($.if(gulpUtil.env.env === 'prod', $.uglify().on('error', onError)))
        .pipe($.concat('app.css'))
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest('public/css'))
        .pipe($.notify({
            title: 'Gulp',
            subtitle: 'success',
            message: 'sass compiled',
            sound: "Pop"
        }))
        .pipe($.livereload());
});

我现在唯一的问题是源映射不能在不同的文件中。

【讨论】：