Next.js: Recommended way to load module fonts?

[geovanisouza92]

I'm following with-global-stylesheet example and I'm trying to correctly configure it to use with blueprintjs.com, that include some icon fonts. When the page is loaded on browser, it requests /resources/icons/icons-16.eot, that is handled by Next that doesn't find the fonts, even when I copy that dir on the project root.

I've tried to configure next.config.js' webpack to load the fonts, but considering that this url is requested from a third-party css, it didn't worked.

Another option is to rewrite css url() to point to static folder, but I wasn't able to make it work (I'm a webpack newbie yet).

So, my suggestion it to handle any unknown route as static asset, that could workaround this problem.

[geovanisouza92]

Well, I've figured out a way to make it work, using postcss-url plugin and changing postcss.config.js:

diff --git a/postcss.config.js b/postcss.config.js
index a4daa25..d9a8f51 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   plugins: [
     require('postcss-easy-import')({ prefix: '_' }),
+    require('postcss-url')({ url: 'inline' }),
     require('autoprefixer')({ prefix: '_' })
   ]
 }

I'm not sure that this is the best way, but works fine.