Sage 9 - Strange browsersync behavior

I notice whenever editing a .php file, browser sync seems to cycle through every css change that’s been made since the yarn session has started. Refreshes normally when editing a scss file. Not a dealbreaker, just curious.

4 Likes

same here, it took some time if you made a lot of changes.

+1, also seeing this. It’s bearable, but requires to restart Webpack from time to time.

Just noticed this today as well, haven’t seen this kind of behavior before but I’m assuming its a loader config

Did some further inspection, it looks it like it also happens no matter when you refresh the page if you have made any changes SCSS or JS. Also seems like webpack isn’t storing the previously updated modules and is rerunning all of the previous changes on reload.

I looked through the webpack config and it looks more or less ok, could it be because of the way the middlewares hook into browsersync? I’ve used Hot Module Reloading on a couple of react projects now but have never seen it do this before. If you’re doing any sort of styling work this issue makes it pretty hard to move fast and make lots of changes. Willing to submit a PR if we can get down to the bottom of this!

Looks like the problem went away once I changed the config.json publicPath: app/theme/sage to my folder structure in WP eg. publicPath: /wp-content/themes/your-theme

Hmm. I’ve had publicPath: /wp-content/themes/{{theme-name}} set up correctly per the docs. Don’t think this is the issue.

I’m having the same issue and it is driving me mad.

Unfortunately changing the publicPath doesn’t fix it for me either.

This seems to have been resolved. Havent noticed it since beta or before.

Experiencing this with v9.0.0-beta.2. Changing the publicPath to the recommended /wp-cotent/themes/{{theme-name}}, seems to have worked.

@psorensen, how has this been resolved and what do I need to do to update it to the resolution? Is the resolution the publicPath change?