SASS - Inspector显示错误的来源

Question

我正在与Gulp + SASS合作。我有时遇到的问题是（Firefox）检查器显示错误的* .scss源（见图）。知道这里出了什么问题吗？在此示例中，Inspector表示定义位于“pages.scss”中，但它位于“header.scss”中。这对我来说是个问题。我在Chrome和Internet Explorer中也遇到了这个问题。

这里是源图代码：

 gulp.task('styles', function () {
gulp.src( styleSRC )
.pipe( sourcemaps.init() )
.pipe( sass( {
  errLogToConsole: true,
  outputStyle: 'compact',
  //outputStyle: 'compressed',
  // outputStyle: 'nested',
  // outputStyle: 'expanded',
  precision: 10
} ) )
.on('error', console.error.bind(console))
.pipe( sourcemaps.write( { includeContent: false } ) )
.pipe( sourcemaps.init( { loadMaps: true } ) )
.pipe( autoprefixer( AUTOPREFIXER_BROWSERS ) )

.pipe( sourcemaps.write ( styleDestination ) )
.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
.pipe( gulp.dest( styleDestination ) )

.pipe( filter( '**/*.css' ) ) // Filtering stream to only css files
.pipe( mmq( { log: true } ) ) // Merge Media Queries only for .min.css version.

.pipe( browserSync.stream() ) // Reloads style.css if that is enqueued.

.pipe( rename( { suffix: '.min' } ) )
.pipe( minifycss( {
  maxLineLen: 10
}))
.pipe( lineec() ) // Consistent Line Endings for non UNIX systems.
.pipe( gulp.dest( styleDestination ) )

.pipe( filter( '**/*.css' ) ) // Filtering stream to only css files
.pipe( browserSync.stream() )// Reloads style.min.css if that is enqueued.
.pipe( notify( { message: 'TASK: "styles" Completed! ', onLast: true } ) )
});