Sage 9 beta 4: Browser Sync doesn't update the styles

Hi I have successfully used an image using

background: url("../images/light_blue_pattern.png") repeat;

However, when I change the image to something else like

background: url("../images/main_bg.png") repeat;

I get the following error;
GET http://localhost/wp-content/themes/tonyfry/dist/images/main_bg.png 404 (Not Found)

There should be the site name between localhost and wp-content. I do not get the same error when I use the first image.

I have also noticed that first image (working one) loads as
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAIAAAC3ytZVAAAACXBIW…Dj35L0yDELMap4GwSibzCrS4JK23+GbZNMDT5ltPrBzPX8BXCzPO2Gyh4dAAAAAElFTkSuQmCC) repeat;

in compiled css. And second one use http://localhost/wp-content/themes/tonyfry/dist/images/main_bg.png as the URL.

May want to try rebuilding your assets to see if it resolves this for you.

yarn build

I can’t use yarn start as it’s not updating the styles during the watch. So I always use yarn build.

1 Like

So i did the following steps.

  1. Removed .cache-loader folder
  2. Ran yarn start (it created a new .cache-loader folder)
  3. Modified _global.scss file ( e.g.: change body background color)
  4. Browser displayed “…rebuilding” in the corner and then displayed success message however style didn’t update

I’ll disable the plugin in see what happens, Thanks!

4 Likes

My problem is
yarn run start runs as if there are no errors however it doesn’t apply main.css

Browsersync detects changes but doesn’t update.

Do the files in the dist folder get updated with the new changes at all?

I’ve been able to fix image loading issue by adding “http://localhost/<project_folder_name>” to “/wp-content/themes/<theme_name>” of the “publicPath”. Thanks for your help mate!

2 Likes

There is no main.css file in the dist folder at all when I run yarn run start :neutral_face:

1 Like

Use the search! Sage 9 main.css 404 on devUrl

1 Like

Thanks mate! I’ll go through that

Fixed by "publicPath": "/wp-content/themes/<theme_name>/"

1 Like

Same problem here.
To see changes on css i need to reload the page with devtools opened and with disable cache flagged. I don’t get any css update neither a reload when i change the js.

Here is the console error, that’s is not a not found error but something different (I deleted the theme name :slight_smile: )

. The strange things is that if I open that link in a new tab I get it works.
Is possible that is something http / https related? I’m working on a https protocol, gives me by Local

My config.json is

  "publicPath": "/wp-content/themes/themeName",
  "devUrl": "https://siteName.dev",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/controllers/**/*.php",
    "resources/views/**/*.php"
  ]

Any idea?

EDT: when save the scss file I got a message in the corner from webpack that everything is fine and this in the console

.
I noticed that the style folder in the dist disappears but I don’t get any error in the terminal. Then if I do a yarn run build the dist folder appears again. The strange thing is, as I already write before, is that if I reload the page (with dev tools + cache disabled) I get the style updated. :thinking:

1 Like

Hmm, it’s possible that HTTPS on your devUrl is causing a problem - have you tried change it to just http://...? Of course, it should work but do you really need HTTPS for dev? I’ve used it for some sites via Laravel Valet for my stack and it was fine but I haven’t tried yet for any Sage 9 sites.

Another question that probably doesn’t mean anything: in the watch section, you have the path resources/controllers/**/*.php - did you add that? I don’t have it and I don’t see it in the default installation. Plus, my controllers are in app/controllers, not resources/controllers… It would be surprising if a bad path in the watch list was enough to cause these problems but who knows…

Also, how long ago did you start this theme and how did you install it? For mine I used composer create-project roots/sage your-theme-name dev-master like it says in the readme and it has worked well. Having said that, I later modified mine to replace SASS with Stylus and a few other details. The default installation was working perfectly though.

I’ve no idea how to change it because the default is https

I didn’t do anything by my own in this file, just set the devUrl. I don’t think is is a path problem because the js is built correctly, only the scss is not compiled into css in the dist folder BUT if i reload the page I can see the new style applied

actually I don’t remember how I did it but I’m sure I used composer as described in the installation doc. I made a quick check right now, on my composer packages I have roots/sage-lib 9.0.0-beta.4 with roots/sage-installer 1.3.0

@dghez, I just tried a fresh composer install and ran the Sage installer with all the defaults. I also set the site to run under SSL (ie. https://sage9.dev). I set this same URL in the sage installer.

I’m using a different system for my server (Laravel Valet) so maybe your results will be a bit different but I observed similar problems with CSS not updating. Part of the problem seems to be that if you have a devUrl under HTTPS, the browsersync proxyUrl is still http by default in the config.

In my setup, all non-HTTPS traffic gets redirected automatically so when I ran yarn start, it was loading https://localhost:3000/ in the browser but it wasn’t working because of mixed content (still trying to load content from http://localhost:3000/ due to the proxyUrl setting). I also had lots of browser warnings because I don’t have a valid SSL certificate for localhost so I had to tell Chrome I wanted to proceed anyway…

When I changed the proxyUrl to https://localhost:3000, and ran yarn start again, it finally began to work with the styles reloading (and viewing on https://localhost:3000 despite the broken HTTPS warnings).

For reference, this is my config.json:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/sage9",
  "devUrl": "https://sage9.dev",
  "proxyUrl": "https://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

So in summary, it looks like there are some issues with using Browsersync and a HTTPS devUrl. Unless you really need HTTPS locally, I think it would be better to go without it.

What happens if you try to visit your dev URL with just http://? If it redirects, you might have to update your WordPress siteurl and home entries in the wp_options table. If you can make it work without the HTTPS, you should have fewer headaches with all this…

2 Likes

Using https://localhost:3000 in my config.json makes everything work. The strange thing is that I’ve already tried to do that but I got errors. This time maybe something changed and it worked.
So weird.

Now the only thing I need to solve is the caching problem, I don’t get anything updated without devTools opened and disable:cache flagged.

Btw thanks @Stephen ! You made my day :slight_smile:

Glad you got it to work finally, Robert :slight_smile:

That’s strange about the caching problem. Normally I have dev tools open most of the time when I’m changing styles but it also works fine with it closed. I guess you could leave dev tools open and detach it if you need the screen space…

It would be good to resolve it properly though - have you tried turning the disable cache flag off and looking at the network panel to see what the HTTP headers are? Maybe something in your local server setup is triggering the caching. It’s also possible that there’s some problem still with HTTPS and the Browser Sync proxy.

I’m stuck at this problem.

In the chrome console it show the following error message:

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

I think it might be connected. Can anybody help?

1 Like

For me I fixed this problem by switching everything to http rather than https. Not sure why it fixed it but it did.

1 Like

Here’s an explanation: Yarn run build Error | Dist folder permissions unchangeable