Hi,
a similar scenario might have been discussed before, but I haven’t found an answer to my problem, sorry.
When I refer to assets (e.g. SVG files) in .scss files as in …:
.show-all {
background-image: url("../images/svg/show-all.svg");
}
… the following happens:
-
yarn start
=> everything works, SVG files are displayed -
yarn build
=> SVG files don’t show up
If I look at Chrome’s inspector:
- After
yarn start
, the assets are referred to as:background-image: url(http://localhost:3001/wp_site_name/wp-content/themes/theme-name/dist/images/svg/show-all.svg)
- After
yarn build
, the assets are referred to asbackground-image: url(/wp-content/themes/theme-name/dist/images/svg/show-all.svg)
, which further resolve in the browser tohttp://localhost:8888/wp-content/themes/theme-name/dist/images/svg/show-all.svg
I might be dumb or blind, but I don’t get why the browser resolves the second one to…:
http://localhost:8888/wp-content/themes/theme-name/dist/images/svg/show-all.svg
… and not…:
http://localhost:8888/wp_site_name/wp-content/themes/theme-name/dist/images/svg/show-all.svg
…when I access the site at…:
http://localhost:8888/wp_site_name/
The built main.css looks good to me…:
.show-all {
background-image: url(/wp-content/themes/theme-name/dist/images/svg/show-all.svg);
}
And the SVG files appear correctly in the dist/images/svg/
directory. It’s only the “wp_site_name/” part, which gets lost.
Further info:
In the early days using Sage, I had often trouble with BrowserSync and reload-loops, which has possibly thrown my config.json off. Here’s an example of what I typically have there:
{
"entry": {
"main": ["./scripts/main.js", "./styles/main.scss"],
"customizer": ["./scripts/customizer.js"]
},
"publicPath": "/wp-content/themes/theme-name",
"devUrl": "http://localhost:8888/wp_site_name",
"proxyUrl": "http://localhost:3001/wp_site_name",
"cacheBusting": "[name]_[hash:8]",
"watch": ["app/**/*.php", "config/**/*.php", "resources/views/**/*.php"]
}
Finally, I’ve had the problem with asset paths for a long time, but got away with it as I got into a habit of converting simple SVGs to base64, which I then gave directly in the .scss files, but now I’ve got an SVG file so large that converting and having base64 data in .scss files is no longer feasible. It’s time to find and fix the real cause of the problem.
Any help much appreciated, thank you so much for your time!