Gulp не компилирует файлы @import sass

Question

Я пытаюсь сделать Gulp скомпилировать мои sass-файлы. Он видит изменения в файле main.sass, но если я @import файлы, он не видит изменений в них, если я не перезапущу gulp.

Вот мой gulpfile

var gulp = require('gulp'), 
     sass = require('gulp-ruby-sass'), 
     autoprefixer = require('gulp-autoprefixer'), 
     browserSync = require('browser-sync').create(), 
     jade = require('gulp-jade'); 

gulp.task('browser-sync', function() { 
    browserSync.init({ 
     server: { 
      baseDir:'./' 
     } 
    }); 
}); 

// Compiling SASS to CSS 
gulp.task('styles', function() { 
    return sass('assets/sass/main.sass') 
    .on('error', sass.logError) 
    .pipe(autoprefixer({ 
    browsers: ['last 3 versions','> 5%'], 
    cascade: false 
    })) 
    .pipe(gulp.dest('assets/css/')) 
    .pipe(browserSync.stream()); 

}); 
//HTML 
gulp.task('templates', function() { 
    var YOUR_LOCALS = {}; 

    gulp.src('./*.jade') 
    .pipe(jade({ 
     locals: YOUR_LOCALS, 
     pretty: true 
    })) 
    .pipe(gulp.dest('./')) 
}); 

//Default task 
gulp.task('default', ['styles', 'watch', 'browser-sync', 'templates']); 

gulp.task('watch', function(){ 
    gulp.watch('*.html').on('change', browserSync.reload); 
    gulp.watch('*.jade').on('change', browserSync.reload); 
    gulp.watch('*.css').on('change', browserSync.reload); 
    gulp.watch('assets/sass/main.sass', ['styles']); 
    gulp.watch('*.jade', ['templates']); 
}) 

И это структура моего проекта

Answer 1

Вы только наблюдая за изменениями в assets/sass/main.sass. Вы должны следить за изменениями в любой .sass файл ниже assets/sass:

gulp.watch('assets/sass/**/*.sass', ['styles']); 

Вместо:

gulp.watch('assets/sass/main.sass', ['styles']);