Browsersync breaking css after second save

Hi, I’m new here and very new to gulp, bower, sage etc.

I’m working off a remote dev environment (for several reasons which I won’t go into) with a super fast connection, and have everything setup and working well, except for a weird issue with browsersync.

I start gulp watch and browsersync is connected and working.

I make a change in any partial and it updates the browser’s connected and all is good.

If I make a second change, it reloads and runs with no errors but then just about all of my css is missing from main.css, all that’s in there is my normalize.scss which is my first import in main.css

However If I make a change to _variables.scss I get an error in watch saying:

  20:17  Undefined variable: "$bg-colour".
  20:17  Undefined variable: "$bg-colour".

It’s actually in there twice!? (is that normal?)

If I then close watch and run gulp again, it compiles fine and the site with the new changes loads fine, so I’m assuming the issue is linked with browsersync.

Has anyone come across this or have any ideas?


I did some more investigating and research and came across another post which had a fix:

The fix on there from fabrizim works perfectly!