Webpack sync is not working

sage
,
1

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
18%20PM

2

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
3

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.

4
  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.
5

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

...
"publicPath": "/app/themes/orangesmith",
...
2 Likes
6

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

08
081034×964 65.5 KB

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.

7

I solved my problem as described here:

→ Check out the links in that post!