Relative url in css stylesheets point to localhost on external machine

Hey there,

i’m using sage 9.0.0-beta.3 (from packagist) with browsersync. In my stylesheet i’m using relative urls to point to images. So for example:

background-image: url(../images/example.min.svg);

This works fine on my local machine, but when i access the page on a different machine via the external url (e.g. 192.168.0.100), the images are not found.
That is because the url still points to http://localhost:3000/app/themes/example-theme/dist/images/example.min.svg, instead of http://192.168.0.100:3000/app/themes/example-theme/dist/images/example.min.svg

Any ideas how i could fix this?

Thanks a lot!

You have to change the hostname/domain in WordPress database, you can use a plugin like this one (it also offers a simpler domain replace feature):


Don’t forget to backup your database first!

Thank you for your answer!
Unfortunately that’s not really an option, because i would have to migrate my database everytime my ip changes?!
And that happens every time i’m on a new network (which is quite often…).

Also, i’m not sure if this is the issue here, because my database actually points to my local dev url, which is e.g. http://example-project.dev and not to the one browsersync gives me.

A hostname would indeed solve the issue with changing IP addresses.

The localhost hostname must be still (incorrectly) somewhere in the WordPress database -
you would have to replace it with your permanent dev hostname.

Once this has been fixed there shouldn’t be any need for further changes until deployment to staging/production. Then a transfer tool can be handy:

Thanks again for your answer, especially the wp cli script themes quite handy.

But i don’t think WordPress is the issue here (surprisingly enough, since it likes to mess with urls so much…).

When i build to production the urls in my stylesheet are correctly referenced relatively (so with ../images/example.min.svg), but during development the blob of css that is inserted by webpack actually hard codes the absolute url

background-image: url(http://localhost:3000/app/themes/example-theme/dist/images/example.min.svg);

which obviously cannot work on external machines… I feel like there is something wrong with my webpack or browsersync config.

Anything i can do about that?

For Sage 9 the config file is located under
resources/assets/config.json,
option fields devUrl and proxyUrl.

Ah thank you!
If i change the proxyUrl there to my ip address, instead of localhost:3000 the urls are indeed correct!

Although this does mean that i have to change the proxyUrl every time my ip changes, which is kind of annoying… I wonder if webpack could just leave the relative urls in stylesheets untouched?

Why not use the hostname instead of the (chaning) IP address (for proxyUrl)?

Because the hostname does only resolve on my local machine. For external machines, i think i would have to set up a local dns server.