Sass不会从浏览器同步中重新加载

Question

我是新手，我正试图独自创建我的第一个项目。当我使用gulp yarn-start时，该任务有效。它监视并转换index.html中的index.twig和style.css中的文件style.scss，但是sass不会从浏览器同步中启动重新加载，并且不会更新更改。

基本上，我无法在浏览器同步中看到sass的重新加载。

提前一点谢谢:)

这是文件夹结构：

dist:
 css
   style.css
 html
   index.html

 gulpfile.babel.js
   index.js

src
 markup
  index.twig
 scss
  style.scss

这是我的gulp文件，带有sass任务

gulp.task('style', () => {
    console.log('execute sass file');

    return gulp
        .src('src/scss/styles.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(
            cssnano({
                discardComments: { removeAll: true },
                reduceIndents: false,
                zIndex: false
            })
        )
        .pipe(rename('styles.css'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/css'));
});

gulp.task('sass', function () {

    return gulp.src('src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))
    .pipe(browserSync.reload({
        stream: true
    }));
});

gulp.task('watch', function() {
    gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
    gulp.watch('src/markup/index.twig', gulp.series('twig'));
    console.log('task twig and sass works');
});

gulp.task('browser-sync', () => {
    browserSync.init({
        server: {
            baseDir: 'dist/html',
            browser: 'google chrome',
            server: 'dist',
            open: true,
        }
    });
});

gulp.task('start', gulp.parallel('browser-sync', 'watch'));

gulp.task('yarn', function() {

    return gulp.src(['./package.json'])
        .pipe(yarn());
});

gulp.task('yarn-start', gulp.parallel('yarn', 'browser-sync', 'watch'))