Yarn run build:production adds hash to font file names - how to reference these?

sage
1

My fonts are included:

> @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');
> }

When I run yarn run build:production the file names change for example to 35060D_0_0_05cd14d0.woff so the css reference to them no longer works.

How should I do this like I would for the image assets e.g. call asset_path in the href for the image.

2

If I run yarn run start. Then commit and push my changes to my remote test server then the font path gives a 404.

If I run yarn run build:production and commit and push my changes the font is resolved so what is the difference with a production build? Could someone kindly point me to where this is in the code I can better understand how it works?

Cheers

3

You should reference them as normal, with just the original filename: '../fonts/35060D_0_0.eot'

Webpack will automatically resolve the path and your fonts should be loaded in your css:
https://github.com/roots/docs/blob/sage-9/sage/theme-development-and-building.md#images-in-css

Only on yarn build:production an assets.json file is generated in your dist folder, which holds all the hashed filenames generated by Webpack.

The asset_path function in app/helpers.php loads the sage-lib dependency and handles the hashed filename resolving:
https://github.com/roots/sage-lib/blob/master/Assets/JsonManifest.php