Using gulp-livereload with gulp-sass

Question

Gulp-livereload is giving me an error when I save a change to my .scss files. My gulpfile.js has been working fine for years and just started giving me trouble a little while ago. The scss gets compiled to css and livereload tries to reload the page, but I get the following error (photo attached: https://i.stack.imgur.com/o57el.png). When I manually reload the page the error goes away and the style changes are reflected. Also, if I make changes to other files (i.e. HTML or JavaScript) everything works just fine.

It may also be worth mentioning, I am using MAMP to create a local Apache server, so I don't think I can make use of something else like browsersync. Any help would be much appreciated, thank you!

Here is what my gulpfile.js looks like.

'use strict';

var gulp = require('gulp');

var sourcemaps = require('gulp-sourcemaps');

var sass = require('gulp-sass');

var livereload = require('gulp-livereload');



gulp.task('sass', function () {
  return gulp.src('./styles/sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./styles/css'))
    .pipe(livereload());
});

gulp.task('html', function() {
  return gulp.src('./**/*.html')
    .pipe(livereload());
});

gulp.task('js', function() {
  return gulp.src('./js/*.js')
    .pipe(livereload());
});

gulp.task('watch', function () {
  livereload.listen();
  gulp.watch('./styles/sass/**/*.scss', gulp.series('sass'));
  gulp.watch('./*.html', gulp.series('html'));
  gulp.watch('./js/*.js', gulp.series('js'));
});