Gulp webapp生成器sass源图

Question

我无法使sass源图工作，我在gulpfile中设置了这个：

Sass任务代码段形式Gulpfile：

gulp.task('styles', function () {
    return gulp.src('app/styles/main.scss')
        .pipe($.rubySass({
            style: 'expanded',
            precision: 10,
            sourcemap: true
        }))
        .pipe($.autoprefixer('last 1 version'))
        .pipe(gulp.dest('.tmp/styles'))
        .pipe(reload({stream:true}))
        .pipe($.size());
});

main.css.map文件实际上在.tmp/styles旁边的main.css下生成，但浏览器无法读取它。我使用generator-gulp-webapp形式的yeoman和BrowserSync。

来自gulpfile的BrowserSync片段：

gulp.task('serve', ['styles'], function () {
    browserSync.init(null, {
        server: {
            baseDir: ['app', '.tmp'],
            directory: true
        },
        debugInfo: false,
        open: false,
        host: "localhost"
    }, function (err, bs) {
        require('opn')(bs.options.url);
        console.log('Started connect web server on ' + bs.options.url);
    });
});