Can't load the file on "dist" folder after yarn build & production

Hello everyone,

I’m new on Sage 9.0.7 and i just developing a website and when i yarn start on Browsersync everything is fine, but after i yarn build or yarn build:production, all the files on “dist” folder can’t be load.
for example, my custom fonts and background-image url images.

Anyone can help me?
Sorry for my poor english :slight_smile:


Hey @Franky_Wong,

After you run yarn build or yarn build:production, you should visit the site at its devUrl (e.g., http://mylocaltestsite.test), not the Browsersync URL.

Can you give that a try? If it’s still not working right, please share the contents of your config.json file.

Hello @mmirus

Thanks your reply!

I have visited my devUrl but it still not work. The dist folder just work on Browsersync.
And here is my config. file and sources on chrome. (as you can see there haven’t font folder here)


This part of your error log suggests that the font file exists, but your browser can’t load it because of CORS security settings (possibly because your devUrl is also on localhost, just a different port). If that is the problem, this post from @mmirus might be helpful: CORS header Browsersync issue - #9 by mmirus

1 Like

i have read this and seems not work for me after added the “Access-Control-Allow-Origin” on my Apache server side. and i have found that if i yarn build the project and visit the site without browsersync, the font and images folder is here, but when i visit on browser there have no font and image folder here (see attached).

Hey @Franky_Wong - can you share your @font-face block, as well? And can you tell us what your site URL and home URL are set to on the Settings page in the WP Admin?

Also, can you follow this sequence of steps just to be sure?

  1. Make sure you don’t have yarn start running.
  2. Run yarn build
  3. Visit your site at localhost:8888/dumpling-town/

The reason I’m asking you to perform that sequence is because there are a couple of confusing things I’m seeing in your screenshots. In your very first screenshot, it looks like you loaded the site on your devUrl (localhost:8888), but there are several other signs that Browsersync is running or the localhost:3000 path is being used for some reason:

  1. It’s giving a 404 on main.css, which is commonly associated with viewing the site in Browsersync
  2. It’s trying to get your fonts from localhost:3000
  3. It’s making requests to Webpack hot module reloading.

If you’re viewing the site at localhost:8888, no requests should be being made to localhost:3000 and HMR shouldn’t be involved at all.


Hello @mmirus,

I have a good news is everything goes fine now. here is my develop site

my step is yarn build first and then yarn build:production.
But i have an issue still feel confuse, when i using Browsersync (localhost:3000)(yarn start), images and fonts can’t work normally in other computer browser. it will let me feel so difficult to check the developing view on other computer or mobile.

And i found that maybe this is my localhost problem, I have try to use yarn build production version on my local server, it will get an error message "Failed to load resource: the server responded with a , everything is fine(

This topic was automatically closed after 42 days. New replies are no longer allowed.