Problems with Gulp sass, how to fix?

Question

Sass

The code

var gulp         = require('gulp'),
    concat       = require('gulp-concat'),
    autoprefixer = require('gulp-autoprefixer'),
    cleanCSS     = require('gulp-clean-css'),
    uglify       = require('gulp-uglify'),
    del          = require('del'),
    browserSync  = require('browser-sync').create(),
    sass 				 = require('gulp-sass');

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

const jsFiles = [
  'app/js/lib.js', 
  'app/js/main.js'
]

function styles() {
  return gulp.src('app/css/**/*.css')

  .pipe(autoprefixer({
    cascade: false
  }))

  .pipe(cleanCSS({
    level: 2
  }))

  .pipe(gulp.dest('dist/css'))

  .pipe(browserSync.stream())
}

function scripts() {
  return gulp.src(jsFiles)

  .pipe(concat('script.js'))

  .pipe(uglify({
    toplevel: true
  }))

  .pipe(gulp.dest('dist/js'))

  .pipe(browserSync.stream())
}

function clean() {
  return del(['build/*'])
}

function watch() {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });

  gulp.watch('app/sass/**/*.sass', sass);
  gulp.watch('app/css/**/*.css', styles);
  gulp.watch('app/js/**/*.js', scripts);
  gulp.watch('*.html').on('change', browserSync.reload);
}

gulp.task('styles', styles);
gulp.task('scripts', scripts);
gulp.task('del', clean);
gulp.task('watch', watch);
gulp.task('build', gulp.series(clean, gulp.parallel(styles, scripts)));
gulp.task('dev', gulp.series('build', 'watch'));

After running the dev task, everything is fine, but when I change the sass file, it just writes "Starting 'gulpSass'..." and does not write the changes to the css file.
When I run sass separately everything is fine. What's the matter?