Changes in the css file through Gulp are not displayed - how to do it?

Question

css

spoiler

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  browserSync = require('browser-sync');

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

gulp.task('watch', ['browser-sync', 'sass'], function() {
  gulp.watch('app/sass/main.sass', ['sass']);
  gulp.watch('app/*.html', browserSync.reload)
  gulp.watch('app/js/**/*.js', browserSync.reload)
});

gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
    notify: false
  });
});

In the spoiler, the code of the galp file. How do you need to change the code there so that the browser reloads when changes are made in css files? It's just that it changes now when the main.sass file changes, and there I have solid imports (I want to type by BAM so that each css file is responsible for an independent block).

Answer 1

You just had to write the default gulp.watch gulp task and specify all the SASS or LESS files (which ones you use):gulp.watch("app/sass/**/*.sass", ["sass"]);