You should reference them as normal, with just the original filename:
Webpack will automatically resolve the path and your fonts should be loaded in your css:
This file has been truncated.
post_title: Theme Development and Building
author: Ben Word
post_date: 2015-09-01 18:19:21
<p class="lead">These are the primary projects that make up the Sage workflow:</p>
<li><h4><a href="https://www.npmjs.com/">npm</a></h4><p><small>npm is a front-end package manager. Sage uses npm to pull in Bootstrap and jQuery as dependencies. In previous versions of the theme we used Bower as our front-end package manager.</small></p></li>
<li><h4><a href="http://www.browsersync.io">BrowserSync</a> with Webpack Hot Module Replacement</h4><p><small>BrowserSync with WHR keeps multiple browsers and devices synchronized while developing, along with injecting updated CSS and JS. In previous versions of the theme we used LiveReload for injecting assets.</small></p></li>
<div class="cta-product cta-product-sage well well-sage module"><a href="https://roots.io/books/theme-development-with-sage/" class="media"><div class="media-left"><img class="media-object" src="/app/uploads/theme-development-with-sage-cover-800x1035.png" alt="Sage book cover"></div><div class="media-body"><h4><span class="badge bg-white text-sage">Get the book</span> <br> <span class="text-sage">Theme Development with Sage</span></h4><p class="lead">A step-by-step guide to setting up a custom Sage starter theme.</p><p class="visible-md visible-lg">Build well organized & easily maintained WordPress themes using a modern web development workflow.</p><p class="text-right"><button class="btn btn-primary">Buy</button></p></div></a></div>
yarn build:production an
assets.json file is generated in your dist folder, which holds all the hashed filenames generated by Webpack.
asset_path function in
app/helpers.php loads the
sage-lib dependency and handles the hashed filename resolving: