Webpack sync is not working

I’ve freshly installed everything (Trellis, Bedrock, Sage). When I run yarn run start all SCSS compiles and everything works fine. But when I change any of the SCSS files, the update doesn’t sync and show up in the browser. However, when I create an error in SCSS, it does show me the black overlay with some error message. And if I run yarn run start again, it does show me the updated styles. Please help.

My config.json

Have you checked the browser console (Developer Tools in Chrome, F12 shortkey) at
load of page and when triggering a asset rebuild/reload?

1 Like

Hey @strarsis! Thank you for the response.
Yes, it rebuilds, it even shows a little notification with black background in the upper right corner saying Webpack build<hash> xxxms when I hit save in the editor. And also DONE Compiled successfully in 3383ms in my terminal. When I go to http://localhost:3001/ the browser sync setting are loading nicely. Can’t see any error anywhere! Just not “reloading” the new styles.

  1. Are you using new styles that are visible or are you inspecting the selected elements?
    Maybe these styles are applied indeed but simply not visible.
  2. I encountered an issue with similar symptoms, it could be a CORS issue with browser sync.
    Edit: I notice that you added something related to your browser sync config, the cors option mentioned in the discussion I linked to above may do more than adding this particular header.

A forward slash is missing from the start of your publicPath. It should read:

"publicPath": "/app/themes/orangesmith",

I have the exact same Issue, this is my config.json:

I changed the name of my themefolder from “Roots Paradisepress” to “rootsparadisepress”, because I had an issue with the space in the directory name in wp-cli, when switching themes.

my publicPath originally was:
"publicPath": "\"/app/themes/Roots Paradisepress\"",

→ don’t understand the slash at the beginning of the path and the double quotation marks? Never seen anything like this …

Changing the path to "publicPath": "/app/themes/rootsparadisepress" didn’t fix the issue.

When I run yarn start, it opens the url localhost:3002, which is strange, because in config.json it says localhost:3000. Everything is loaded fine so far. When saving _global.scss, the browser window reloads, but does not show any changes made (also not in chrome dev tools).

This happens on a fresh installed Sage-Theme with bedrock and trellis.

I solved my problem as described here:

→ Check out the links in that post!