I use the latest Chrome version on Mac (83.0.4103.116), Gulp + Browser-sync.
In DevTools, after the Browser-sync applies the changes in style.css and reloads the page, I can't edit any style, it looks like default and blocked:
screenshot
It's very strange that when I'm reloading the page manually (Cmd+R), the styles are available for change again till the next Browser-sync reloading.
screenshot
I've tried to reload the browser, to uninstall and install Browser-sync again, I didn't change the gulpfile.js.
So I can't even guess what's going wrong. What am I missing?
Gulpfile.js code:
var gulp = require('gulp');
var sass = require('gulp-sass');
var bsync = require('browser-sync').create();
gulp.task('default', function() {
bsync.init({
server: ''
});
gulp.watch('*.html')
.on('change', bsync.reload);
gulp.watch('sass/**/*.scss')
.on('change', gulp.series('launch-sass'))
});
gulp.task('launch-sass', function() {
return gulp.src('./sass/style.scss')
.pipe(sass())
.pipe(gulp.dest('./css'))
.pipe(bsync.stream());
});