Sage@9 used sass and resolve-url-loader. I’m not sure, but you might have more luck getting this to play nicely by installing the sass extension.
I say that because it doesn’t look like fontsource plays all that nicely with postcss out-of-the-box. See this stalled issue:
There is a relatively simple way to get you unblocked, regardless. Maybe not perfect, but it works. Happy to make revisions on our end if they are sensible and don’t complicate things for the majority of users.
Anyway, almost all of the (non sass) guides on the fontsource website involve doing the font imports with javascript, so that’s how we’ll do it. Any CSS imported like this will be bundled in the app.css file – it isn’t applied with JS or anything wacky like that.
app.js
import '@fontsource/exo-2/300.css';
import '@fontsource/exo-2/300-italic.css';
import '@fontsource/exo-2/400.css';
// app code
import.meta.webpackHot?.accept(console.error);
This is close but font URLs that are too big for inlining still reference the node_modules path.
I think the copying approach is a great idea, but for me it’s easier to reason about all this if we just copy the files directly before webpack is even invoked.
bud.fs has a pretty nice copy utility (from fs-jetpack) we can use:
bud.config.js
export default async (app) => {
await app.fs.copy(
app.path(`@modules/@fontsource/exo-2`),
app.path(`@src/fonts/vendor/@fontsource/exo-2`),
{overwrite: true},
)
app.alias({
'@fontsource/exo-2': app.path(`@src/fonts/vendor/@fontsource/exo-2`),
})
// ...config
Last thing is to alias @fontsource/exo-2 to our copy target. Now when webpack finds that package reference it will source the modules from our vendored files.
And now we should be all set:
