Browser-sync: SASS + CSS Injecting is not working since 2.24.0 version

Created on 3 May 2018 · 6Comments · Source: BrowserSync/browser-sync

Issue details

Browsersync detects changes in css but it does not inject the new css since 2.24.0 version. You have to manually refresh the page to see the changes

Steps to reproduce/test case

Just use example on https://browsersync.io/docs/gulp to reproduce this issue.

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

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

Please specify which version of Browsersync, node and npm you're running

Browsersync [ 2.24.2 ]
Node [ 10.0.0 ]
Npm [ 6.0.0 ]

Affected platforms

[ ] linux
[x] windows
[ ] OS X
[ ] freebsd
[ ] solaris
[ ] other _(please specify which)_

Browsersync use-case

[ ] API
[x] Gulp
[ ] Grunt
[ ] CLI

If CLI, please paste the entire command below

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

gulp.task('sass', () => {
  gulp
    .src('src/scss/main.scss')
    .pipe(ifElse(isDev, () => sourcemaps.init()))
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([autoprefixer()]))
    .pipe(ifElse(isDev, () => sourcemaps.write()))
    .pipe(ifElse(!isDev, () => cleanCSS()))
    .pipe(gulp.dest('dist'))
    .pipe(browserSync.stream());
});

Source

Chmylov

Most helpful comment

We can simply use the old version to instead.
npm uninstall browser-sync

npm install [email protected]

huilang-me on 3 May 2018

👍3

All 6 comments

Hope to fix it soon.

huilang-me on 3 May 2018

Issue details

I've got the same issue and am unable to fix it. I've tried:

different browsers (no effect)
complete deinstall of node / npm ( no effect)
basic project with basic gulp (no effect)

Browser reloading does work for other things like html changes, but browser syncing (css injection) doesn't. For what i can tell this happens:

Change scss file
2) Browsersync detects it: 1 file changed (style.css)
3) Task finished

When i inspect websockets in my chrome browser (dev tools > network > ws) i see this data in the send frame:

42/browser-sync,["file:reload",{"ext":"css","path":"C:\\#server\\test\\gulp-test\\css\\style.css","basename":"style.css","event":"change","type":"inject","log":false}]

This tells me the data is actually send, but nothing happens afterwards. My guess is that browser-sync-client.js?v=2.24.2 fails in inserting this stylsheet and fails silently.

Steps to reproduce/test case

Use example on https://browsersync.io/docs/gulp to reproduce this issue. (same as above from @Chmylov)

Please specify which version of Browsersync, node and npm you're running

Browsersync [ 2.24.2 ]
Node [ 8.11.1 ]
Npm [ 5.6.0 ]

Affected platforms

[ ] linux
[X] windows
[ ] OS X
[ ] freebsd
[ ] solaris
[ ] other _(please specify which)_

Browsersync use-case

[ ] API
[X] Gulp
[ ] Grunt
[ ] CLI

If CLI, please paste the entire command below

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

`var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var reload = browserSync.reload;

var src = {
scss: 'sass/.scss',
css: 'css',
html: '.html'
};

gulp.task('serve', ['sass'], function() {

browserSync.init({
    server: "./"
});

gulp.watch(src.scss, ['sass']);
gulp.watch(src.html).on('change', reload);

});

gulp.task('sass', function() {
return gulp.src(src.scss)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(src.css))
.pipe(reload({stream: true}));
});

gulp.task('default', ['serve']);`