Browsersync not working on Chrome

Browsersync isn’t displaying styles for me on Chrome on one of my roots projects. I’ve gone through most of the other posts relating to browser sync problems but I’ve had no joy.

Just wondering if anyone might be able to suggest a solution for this strange behaviour:

  • Browsersync works on FireFox but not on Chrome - Windows 10
  • On Chrome I have to edit one of my scss files and then save while yarn start is watching. This will fix the problem temporarily and styles are applied, but as soon as I make a change, navigate to a different page or refresh then I have to make another edit to an .scss file and re-save.

What I’ve tried:

  • Delete all vendor folders and rebuilding composer / empty composer caches
  • Delete node_modules
  • Ran yarn upgrade
  • Ran yarn install
  • Adjusted webpack.config.watch.js with all kinds of settings from this post

It’s cutting my productivity in half at the moment but at least I’ve discovered that Firefox works.