Why is Gulp SourceMap not working correctly?

Question

npm

I start the assembly of the project, everything compiles fine. Initially, there are several scss files and they are compiled into css, but for some reason, sourcemap maps do not work among all plugins. When selecting an element using the developer tools, the correct scss file is displayed, but on the right side of the selector there is a huge nesting and it says "line 1", although there is far from the first line, the selected selector is somewhere in the 50th.

Answer 1

I would do this:
1. update all packages used in the styling task to the latest version
2. swap autoprefixer and sass
3. write sourcemaps in a separate file
as a result:

gulp.task('sass-compile', function () {
  return gulp.src('scss/main.scss')
  .pipe(plumber())
  .pipe(sourceMaps.init())
  .pipe(sass().on('error' , sass.logError))
  .pipe(autoprefixer({
    browers: ['last 2 version']
  }))
  .pipe(sourceMaps.write('.'))
  .pipe(gulp.dest('./css/'))
  .pipe(browserSync.stream())
});