Browser-sync doesn't see changes in sass?

Question

Sass

Hello.
I connect via gulp browser-sync and for some reason it does not see changes in the sass file. Moreover, if you restart gulp, then the change occurs, but only if they are written directly in main.sass. If I write in main.sass @import, then he does not see it at all. I think I'm confused about the paths to the files, but I can't figure it out.
Here is my 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/css/main.sass')
    .on('error', sass.logError)
  .pipe(autoprefixer({
    browsers: ['last 3 versions','> 5%']
  }))
    .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/css/main.sass', ['styles']);
  gulp.watch('*.jade', ['templates']);
})

Here is the project structure

Answer 1

everything is simple. your watch only watches the file assets/css/main.sass, and therefore reacts only to changes in this file.
with your structure you need a watch like this:

gulp.task('watch', function(){
  gulp.watch('assets/css/**/*.sass', ['styles']);
})

I advise you to get acquainted with this

Answer 2

Look at my task:

var sass: ['./src/sass/main.{scss,sass}'] //вынес как переменную
gulp.task('styles', function() {
    gulp.src(src.sass)
    .pipe(sass({
            "sourcemap=none": true,
            noCache: true,
            compass: true,
            style: sassStyle,
            lineNumbers: sassComments
        }))
    .pipe(autoPrefixer())   
    .pipe(gulp.dest(outputDir + 'css'))
    .pipe(connect.reload()) //в данном случае на browser-sync, но сути дела не меняет
});

pay attention to the path from where you take the main.sass file
and in general it looks very strange: return sass('assets/css/main.sass')sass in css ...
You should have sass and css folders in your project in the assets folder, in the first folder you store sass files that are not compiled, but in css, a style file already ready for connection.
In addition, it is very good practice, even the standard would say: do not write any styles in main.sass, only imports and a period.