Gulp内联源映射不起作用

Question

我正在尝试让源映射与Gulp一起工作。我正在使用gulp-ruby sass和gulp-sourcemap。

内联源映射被插入到CSS文件中，但即使我启用了源映射，它在Chrome中仍然不起作用。我仍然只能看到对CSS文件的引用，而不能看到sass文件。

这是我的gulpfile中的sass任务：

gulp.task('sass', function() {
    return sass('src/sass/main.scss', { sourcemap: true, style: 'expanded' }) 
    .on('error', function (err) {
        console.error('Error!', err.message);
    })
    .pipe(sourcemaps.init())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist/assets/css/'))
    .pipe(connect.reload());
});

CSS文件中的内联源映射如下所示：

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5jc3MiLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJtYWluLmNzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIubmF2aWdhdGlvbi1tYWluX19saXN0IHtcclxuICBkaXNwbGF5OiBpbmxpbmU7XHJcbiAgcGFkZGluZzogMDtcclxuICBtYXJnaW46IDA7XHJcbn1cclxuXHJcbi5uYXZpZ2F0aW9uLW1haW5fX2l0ZW0ge1xyXG4gIHBhZGRpbmc6IDAgMTBweDtcclxuICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XHJcbiAgZGlzcGxheTogaW5saW5lO1xyXG59XHJcbi5uYXZpZ2F0aW9uLW1haW5fX2l0ZW06Zmlyc3Qge1xyXG4gIHBhZGRpbmctbGVmdDogMDtcclxufVxyXG4ubmF2aWdhdGlvbi1tYWluX19pdGVtOmxhc3Qge1xyXG4gIHBhZGRpbmctcmlnaHQ6IDA7XHJcbn1cclxuXHJcblxyXG4iXSwic291cmNlUm9vdCI6Ii9zb3VyY2UvIn0= */

我把base64解码成这样：

{"version":3,"file":"main.css","names":[],"mappings":"","sources":["main.css"],"sourcesContent":[".navigation-main__list {rn  display: inline;rn  padding: 0;rn  margin: 0;rn}rnrn.navigation-main__item {rn  padding: 0 10px;rn  list-style-type: none;rn  display: inline;rn}rn.navigation-main__item:first {rn  padding-left: 0;rn}rn.navigation-main__item:last {rn  padding-right: 0;rn}rnrnrn"],"sourceRoot":"/source/"}

这个看起来对吗？我不确定它的外观，但我认为scss文件名引用应该在那里？

就是不能让它工作！

Answer 1

尝试删除此：

.pipe(sourcemaps.init())

我假设你使用的是1.0.0-alpha.x版本的gulp-ruby-sass:

https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0#sourcemap