Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Recommended way to load module fonts? #2302

Closed
geovanisouza92 opened this issue Jun 18, 2017 · 1 comment
Closed

Recommended way to load module fonts? #2302

geovanisouza92 opened this issue Jun 18, 2017 · 1 comment

Comments

@geovanisouza92
Copy link

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
Copy link
Author

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.

timneutkens pushed a commit that referenced this issue Feb 5, 2018
Got this fix from issue #2302. Libraries like `font-awesome` are pretty common. Indicating how to get them to work should be indicated in the `README.md` (if not added to the example)
@lock lock bot locked as resolved and limited conversation to collaborators May 11, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant