Gupl sass doesn't always work, why?

Question

css

There is a gulpfile with 4 tasks. Sass, autoprefixer, serve and start.
Start starts the rest. And the funny thing is that everything works, but sometimes sass seems to skip. It should make changes on save, but it doesn't. You have to restart gulp. And as I noticed, it is stupid when I attribute display: flex or grid. That's right on them.

const gulp = require('gulp')
const gutil = require('gulp-util');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');

gulp.task('autoprefixer', function(done){
   gulp.src('./dist/css/**/*.css')
  .pipe(autoprefixer({
      cascade: false
  }))
  .pipe(gulp.dest('./dist/css'));
  done();
})

gulp.task('sass', function() {
  return gulp.src('./dist/scss/**/*.scss')
  .pipe(sass())
  .pipe(autoprefixer())
  .pipe(gulp.dest('./dist/css'))
  .pipe(browserSync.stream())
});

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

    gulp.watch('./dist/scss/*.scss', gulp.series('sass'));
    gulp.watch('./dist/*.html').on('change', () => {
      browserSync.reload();
    });
});

gulp.task('start', gulp.series('sass', 'autoprefixer', 'serve'));
});

Answer 1

gulp.watch('./dist/scss/*.scss'
You only watch the root files. If you have subdirectories, then changes to them are not tracked.

/dist
  /scss
    main.scss - отслеживается
    /blocks
      header.scss - не отслеживается

This will work for all files:

gulp.watch('./dist/scss/**/*.scss', gulp.series('sass'));