Why doesn't Chrome see the map's sourcemap?

Question

Google Chrome

here is the sass task gulp.task('sass', function(){
gulp.src('./app/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass.sync( ).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./app/css'));
});
As I understand it, after the manipulations done, Chrome should see files with the .scss extension, but there is no result. What to do? Any tips?

Answer 1

A bug in the current version of libsass. You need to install sass 3.3.3

Answer 2

I have it, top to
bottom

gulp.task('sass', function() {
  gulp.src('./sass/main.sass')
    .pipe(plumber())
    .pipe(plugins.sourcemaps.init())
    .pipe(sass({
        includePaths: ['./assets/css/'],
        onError: browserSync.notify
    }))
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: true
    }))
    // .pipe(uncss({
    //    html: ['*.html']
    // }))
    .pipe(plugins.sourcemaps.write("./"))
    .pipe(gulp.dest('./dist/css/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifyCss())
    .pipe(gulp.dest('./dist/css/'))
    .pipe(browserSync.reload({stream:true}));
});

Answer 3

Solved a problem!
Here is the path that is written at the end of the css.
/*# sourceMappingURL=main.css.map */
it must match the map file.
gulp.task('style:build', function () {
return gulp.src(path.src.style)
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message)) ;
this.emit('end');
}))
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: ['src/style/'],
errLogToConsole: true
}))
.pipe(prefixer( {
browsers: ['last 5 versions'],
cascade: true
}))
.pipe(cleanCSS({compatibility: 'ie8'})) //Compress
.pipe(sourcemaps.write('.'))
.pipe(plumber.stop())
.pipe(gulp.dest(path.build.css )) // And in build
.pipe(reload({stream: true})) //And restart the server
});