Svg pulled in via css ::before not showing after build

Hi all,

I’m running Sage 9.0.9.
I have a loading SVG pulled in using a pseudo class in css (see below).

.js-loader {
  &::before {
    content: url("../images/loading-icon.svg");
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    text-align: center;
    width: 100%;

This works fine locally and displays when running yarn start.
But after running a build yarn build the svg get’s copied over correctly into the dist folder, but it won’t show on our staging site. The URL get’s a cache busting parameter in it: sitedomain/site/web/app/themes/sage/dist/images/loading-icon_464d8967.svg

Which seems wrong to me. Removing this so the URL is as per localhost still doesn’t work: sitedomain/site/web/app/themes/sage/dist/images/loading-icon.svg

The svg is sat in the images folder in dist so I can’t see where the Webpack config has gone wrong. Any help would be appreciated.

I’m having a difficult time recreating your issue,1 but I suspect the real problem does not have to do with the cache-busting of the file.

Does your staging (and production) server have a different WordPress file structure than your development server?

Sage sets a publicPath for compiled assets in resources/assets/config.json. By default, it is reflects the structure of a Bedrock install:

  "publicPath": "/app/themes/sage",

The solution if you’re environments differ can be found in this note in resources/assets/build/config.js:

But the URLs you provided seems like a filepath, not a URL:

If you can clarify whether or not your environments differ, we can continue helping to resolve your issue.

¹ Using the same technique for including an image, I tested the following:

  • SVG (1 KB) — webpack includes this as a data URI since it’s so small.
  • PNG (1 KB) — same story as previous.
  • PNG (1.1 MB) — works with the start, build, and build:production commands.
  • SVG (1.1 MB) — same story as previous.

webpack points to the correct, cache-busted URL the latter two cases for production builds.

Hey @knowler. Thanks for looking into this.
I can confirm the WP file structure is the same for both Staging and Production.
The publicPath is like so:

"publicPath": "/site/web/app/themes/sage",

And the resulting file path in the css on our Staging instance is here:

Is there anymore info I could pass on to help with this issue?
Just to confirm, we are using Sage. Bedrock and Trellis.

Your public path should reflect the path to the theme relative to the document root. For a Bedrock install that would be /app/themes/<name-of-your-theme>; you don’t need /site/web.

1 Like

That did it! Thanks @knowler Legend.

1 Like