Почему BrowserSync не релоудит scss файлы?

BrowserSync не сможет релоадить scss файлы из-за того, что scss является препроцессором CSS, и требуется его компиляция в обычный CSS файл. По умолчанию, BrowserSync следит только за изменениями в CSS файлах, но не обнаруживает изменения в scss файлах.

Ответить на эту проблему можно несколькими способами:

1. Использовать Gulp для компиляции scss файлов в CSS перед запуском BrowserSync. Для этого вы можете добавить задачу компиляции scss файлов в ваш Gulp файл. Например, вы можете использовать плагин gulp-sass для компиляции scss в CSS:

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

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

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

  gulp.watch('src/scss/**/*.scss', compileSass);
  gulp.watch('dist/*.html').on('change', browserSync.reload);
}

exports.default = watch;

2. Использовать Gulp для компиляции scss файлов в CSS и использовать BrowserSync как middleware. Этот подход позволяет запускать BrowserSync после того, как scss файлы были успешно скомпилированы в CSS. Пример кода:

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

function compileSass() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
}

function reload(done) {
  browserSync.reload();
  done();
}

function watch() {
  gulp.watch('src/scss/**/*.scss', gulp.series(compileSass, reload));
  gulp.watch('dist/*.html').on('change', browserSync.reload);

  browserSync.init({
    server: {
      baseDir: './dist'
    }
  });
}

exports.default = watch;

Оба подхода позволят вам успешно использовать BrowserSync с scss файлами, обновлять браузер при изменении scss файлов и проверять изменения в реальном времени. Выберите подход, который больше соответствует вашим нуждам и предпочтениям.