When updating npm packages, the "gulp-sass" plugin has been updated to version 5. Why now any error in .scss stops tracking?

Question

gulp.js

Here is my gulp.js It seems that I did everything according to the instructions , but it still does not work as we would like

var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const sourceMaps = require('gulp-sourcemaps');
const imagemin = require("gulp-imagemin");
const imageminJpegRecompress = require('imagemin-jpeg-recompress');
const pngquant = require('imagemin-pngquant');
const run = require("run-sequence");
const del = require("del");
const svgSprite = require('gulp-svg-sprite');
const svgmin = require('gulp-svgmin');
const cheerio = require('gulp-cheerio');
const replace = require('gulp-replace');




gulp.task('sass', function () {
    return gulp.src('scss/style.scss')
        .pipe(plumber())
        .pipe(sourceMaps.init())
        .pipe(sass())
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 2 versions'],
            cascade: false
        }))
        .pipe(sourceMaps.write())
        .pipe(gulp.dest('build/css'))
        .pipe(browserSync.reload({
            stream: true
        }));
});



gulp.task('html', function () {
    return gulp.src('*.html')
        .pipe(gulp.dest('build'))
        .pipe(browserSync.reload({
            stream: true
        }));
});



gulp.task('js', function () {
    return gulp.src('js/**/*.js')
        .pipe(gulp.dest('build/js'))
        .pipe(browserSync.reload({
            stream: true
        }));
});


gulp.task('fonts', function () {
    return gulp.src('fonts/**/*.woff2')
        .pipe(gulp.dest('build/fonts'))
        .pipe(browserSync.reload({
            stream: true
        }));
});
gulp.task('fonts', function () {
    return gulp.src('fonts/**/*.ttf')
        .pipe(gulp.dest('build/fonts'))
        .pipe(browserSync.reload({
            stream: true
        }));
});


gulp.task('css', function () {
    return gulp.src('css/**/*.css')
        .pipe(gulp.dest('build/css'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('allimg', function () {
    return gulp.src('img/**/*.{png,jpg}')
        .pipe(gulp.dest('build/img'))
        .pipe(browserSync.reload({
            stream: true
        }));
});

gulp.task('images', function () {
    return gulp.src('build/img/**/*.{png,jpg}')
        .pipe(imagemin([
         	//imagemin.gifsicle({interlaced: true}),
  imagemin.mozjpeg({
                quality: 75,
                progressive: true
            }),
  imagemin.optipng({
                optimizationLevel: 5
            }),
  imagemin.svgo({
                plugins: [
                    {
                        removeViewBox: true
                    },
                    {
                        cleanupIDs: false
                    }
    ]
            })

      ]))
        .pipe(gulp.dest('build/img'));
});








gulp.task('svg', function () {
    return gulp.src('img/**/*.svg')
        .pipe(svgmin({
            js2svg: {
                pretty: true
            }
        }))
        .pipe(cheerio({
            run: function ($) {
                $('[fill]').removeAttr('fill');
                $('[stroke]').removeAttr('stroke');
                $('[style]').removeAttr('style');
            },
            parserOptions: {
                xmlMode: true
            }
        }))
        .pipe(replace('>', '>'))
        // build svg sprite
        .pipe(svgSprite({
            mode: {
                symbol: {
                    sprite: "sprite.svg"
                }
            }
        }))
        .pipe(gulp.dest('build/img'));
});


gulp.task('copy', function () {
    return gulp.src([

        'img/**',
        'fonts/**',
        'js/**',
        'css/**',
        '*.html'
  ], {
            base: '.'
        })
        .pipe(gulp.dest('build'));

});

gulp.task('clean', function () {
    return del('build');
});



gulp.task('serve', function () {
    browserSync.init({
        server: "build"
    });

    gulp.watch("scss/**/*.scss", gulp.parallel("sass"));
    gulp.watch("*.html", gulp.parallel("html"));
    gulp.watch("js/**/*.js", gulp.parallel("js"));
    gulp.watch("css/**/*.css", gulp.parallel("css"));
    gulp.watch("img/**/*.{png,jpg}", gulp.parallel("allimg"));
    gulp.watch("img/**/*.{svg}", gulp.parallel("svg"));

});

gulp.task('copy', function () {
    return gulp.src([
      'img/**',
      'fonts/**',
      'js/**',
      'css/**',
      '*.html'
  ], {
            base: '.'
        })
        .pipe(gulp.dest('build'));

});

gulp.task('clean', function () {
    return del('build');
});

gulp.task('build', gulp.series('clean', 'copy', 'sass', 'images', 'svg'));

Answer 1

Instead .pipe(sass())of.pipe(sass().on('error', sass.logError))

gulp.task('sass', function () {
    return gulp.src('scss/style.scss')
        .......
        .pipe(sass().on('error', sass.logError))
        .......
});