Как автоматически обновить стили после изменений в SCSS?

Question

[1klass001]

Работаю с файлами SCSS на Sublime с дополнением LIveReload которое автоматически компилируются в CSS после сохранения файла с помощью PREPROS`а. Всё успешно компилируется и страница обновляется после сохранения SCSS, но вот стили на странице в браузере обновляются только если сохранить самого CSS. На текущее время работать приходится при открытых сразу 2х файлов (style.SCSS и style.CSS). Файл CSS открыт рядом просто чтобы после изменений в SCSS я переключился на CSS и нажал CTRL+S.

Перенастроил хоткей на save all но такой способ не решает ничего.
Подскажите как бы я смог решить свою задачу.

Comments

[Сергей delphinpro]

package.json

{
  "private": true,
  "type": "module",
  "devDependencies": {
    "browser-sync": "^2.27.10",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-sass": "^5.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "sass": "^1.54.4"
  }
}

gulpfile.js

import gulp from 'gulp';
import sass from 'sass';
import browserSync from 'browser-sync';
import gulpSass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemaps';
import autoprefixer from 'gulp-autoprefixer';

const sassCompiler = gulpSass(sass);
const bs = browserSync.create();
const __dirname = process.cwd();

function serve() {
  bs.init({
    proxy    : undefined,
    browser  : ['chrome'],
    server   : {
      baseDir  : './dist',
      directory: false,
    },
    startPath: '/index.html',
  });
}

function watch() {
  gulp.watch(['./src/scss/**'], build_styles);
}

function build_styles() {
  return gulp.src([
    './src/scss/main.scss',
  ])
    .pipe(sourcemaps.init({}))
    .pipe(sassCompiler({
      outputStyle: 'expanded',
    }, false).on('error', sassCompiler.logError))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('.', {}))
    .pipe(gulp.dest('./dist/css'))
    .pipe(bs.stream());
}

export default function (done) {
  gulp.series(
    build_styles,
    gulp.parallel(
      watch,
      serve,
    ),
  )(done);
}