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

sage
1

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.
Thanks.

2

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.

3

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:

14
14872×276 30.3 KB

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

4

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
5

That did it! Thanks @knowler Legend.

1 Like