Referencing images in dist/images with cache busting suffix

sage
1

I’ve just started with Sage 9.

I’m having an issue with yarn run build:production - all the images are optimised and outputted in /dist/images/ and they have the cache busting suffix.

When I reference these images in my html I’m referring to them by the names of the images in /assets/images/ not the new names, so what is the point of them being optimised and how to reference them properly? I have a similar problem with my fonts in my css.

2 Likes
2

I found a similar topic here Npm run build:production renames images - Displaying Image in Theme File

So I can use a asset_path function to get the asset path from assets.json for the images - great.

However, that doesn’t quite solve my problem with the fonts, where the name for the font is referenced in my css

for example:

@font-face {
    font-family: 'MikadoBold';
    src: url('../fonts/35060D_0_0.eot');
    src: url('../fonts/35060D_0_0.eot?#iefix') format('embedded-opentype'), url('../fonts/35060D_0_0.woff2') format('woff2'), url('../fonts/35060D_0_0.woff') format('woff'), url('../fonts/35060D_0_0.ttf') format('truetype'), url('../fonts/35060D_0_0.svg#wf') format('svg');
}

these fonts are now in /dist/fonts

with names:

35060D_0_0_2a718277.eot
35060D_0_0_05cd14d0.woff
35060D_0_0_7eb85d69.svg
35060D_0_0_124de5c4.ttf
35060D_0_0_fadcecae.woff2

I can’t use asset_path function here because I’m referencing the fonts in my css file

1 Like
3

Here’s the section of the Sage 9 docs for referencing assets in CSS: https://github.com/roots/docs/blob/sage-9/sage/theme-development-and-building.md#images-in-css (images in this case but it would be the same regardless).

You just reference the relative path without the suffixed hash.

1 Like
4

Thank you for the reply. I think I’ve got that far. It is just the fonts that I’m having difficulty with. Forgive me if I’m missing something. There was a similar question here but it wasn’t resolved

Ah, I think I might need to use font-awesome.

5

What do you get when you look at network tab in the Chrome developer tools? Are the font files missing and if so, what is the path that they are referencing that’s not being found?

6

For example:

25
25614×610 65.3 KB

41
412130×590 112 KB

1 Like
7

font-src-1

font-src-2
font-src-21221×231 61.8 KB

8

I’ve found the problem.

The path was

http://l.dccfirstforwellbeing.dev/web/app/themes/dccfirstforwellbeing/dist/fonts/35060D_0_0_fadcecae.woff2

Should be http://l.dccfirstforwellbeing.dev/app/themes/dccfirstforwellbeing/dist/fonts/35060D_0_0_fadcecae.woff2

I think it was set wrong in config.json.

Changed in config.json , reran yarn run build:production and its working.

Location /resources/assets/config.json

Thanks :slight_smile: @nathobson

4 Likes
9

Thank you for including the resulting fix and glad you got it solved.

1 Like