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

webpack
browsersync
sage9

#1

System: MacOs
PHP: 7.1.8

I am suing sage-9-beta-4 for a project. **yarn build** works fine. When I run the script **yarn start** it launches the website, and starts watching the files. However, changes for scss files do not reflect on the browser.

I can see following error in the console window.

Failed to load resource: http://localhost:3006/xxxxxx/wp-content/themes/tonyfry/dist/styles/main.css
the server responded with a status of 404 (Not Found)


#2

don, did you try removing the .cache-loader folder?


#3

I removed, however it reappears. Is there a way to disable the cache-loader plugin? Will it fix it?


#4

Did removing that folder fix your problem?

If so, then consider removing the cache-loader ({ loader: 'cache' },) in webpack.config.js.

However, doing that might slow things down.

Personally, I would keep the loader and just remove the folder, only when needed (when it seems like changes are not being recognized).


If removing the folder did not fix your problem, then maybe I misinterpreted the issue. If that’s the case, can you post a few more details?


#5

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.


#6

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

yarn build


#7

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


#8

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!


#9

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.


#10

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


#11

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!


#12

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


#13

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


#14

Thanks mate! I’ll go through that


#15

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


#16

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:


#17

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.


#18

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


#19

@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…


#20

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: