Browsersync breaking css after second save

[rockethouse]

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:

assets/styles/common/_base.scss
  20:17  Undefined variable: "$bg-colour".
assets/styles/common/_base.scss
  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?

Cheers

[rockethouse]

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

Issue with gulp watch on files modified through ftp: how to delay task?

Hi! With Gulp I encountered an issue when watching files I modify through FTP. When I develop, I launch gulp watch and then I modify files (PHP, LESS, ecc.) using FTP. Apparently the watch task trigger “too fast” when the file is uploaded, and I think it runs on an almost empty file, since sometimes all the contents of the file are not in the final css or js (this happen very often with large files). How can I delay the watch tasks for a couple of seconds, so I can be sure that the file has b…

The fix on there from fabrizim works perfectly!