Injection CSS with Browser-sync

[leonardollobato]

First, congratulation for the course, it's great.

Second, I'm having problems to figure it out why my browser is reloading on inject css. I tried to find help on the plugin docs, it's seems to be updated and it's a little bit different of your implementation, so, no success.

I copied and paste the exercise gulp files, but it's keep not working, the browser is reloading when I change the less file.
Thanks in advanced !

[ghost]

I have the same problem.

versions:

gulp --v
[16:09:25] CLI version 3.8.11
[16:09:25] Local version 3.9.0

browsersync: 2.7.13

@johnpapa is there a version that we can use and will work with your course?

[bechelani]

I'm having the same issue.

I was using Safari as my default browser. Changed to Chrome, but issue still exists.

Has anyone found the solution?

[bechelani]

@annabellor versions gave me a clue. I went back to the course and checked which version @johnpapa installed when he ran npm install --save-dev browser-sync and realized that the current version at the time was 1.8.2.

So I went back and reverted my project to use 1.8.2 and voila! Injection of the CSS started working.

I guess it is an issue with the current version of browser-sync.

[johnpapa]

Hmmmm. I see this issue related here BrowserSync/browser-sync#717

[jzgoda]

It appears that the latest version of browser-sync isn't paying attention to the '!' + config.less line in options.files, and the refresh is getting triggered by the **/*.*. Updating options.files to only include the files to listen to seems to fix the problem.

files: [
    config.client + '**/*.js',
    config.client + '**/*.html',
    config.client + '**/*.jpg',
    config.client + '**/*.png',
    config.client + '**/*.gif',
    config.temp + '**/*.css'
]