Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Server-rendering + webpack... styles?

See original GitHub issue

I’m using React server-rendering and webpack, which works, however the CSS isn’t server rendered.

I’ve looked at this page: https://fontawesome.com/how-to-use/server-side-rendering, however it’s not clear to me how to get the CSS from @fortawesome/fontawesome to be picked up by webpack and included in my CSS bundle.

I also need to stop the inserting of the <style> tag in the <head> by the client-side fontawesome js.

Server-rendering with js disabled in the browser means no CSS for font awesome (the base styles), so I’m seeing this:

If the CSS is missing when this icon displays in the browser it will flash from a very large icon down to a properly sized one a moment later.

Are there any solutions for this…?

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:12 (1 by maintainers)

Top GitHub Comments

1reaction

robmadolecommented, Dec 9, 2017

In the latest release of @fortawesome/fontawesome we’ve included the CSS for this as an external file. The packages.json points to it with the style property. I think the postcss plugins will use this value. Let me know if that helps.

0reactions

davidfurlongcommented, Dec 11, 2017

@stephen-last I think we can close this issue thanks @robmadole

Top Results From Across the Web

Enabling assets for Server-Side Rendering in Webpack

One existing solution is webpack-isomorphic-tools, but I found this very hard to set up ... fake-style-loader enables loading CSS modules on the server....

Adding style to Server-Side rendering and automating the ...

1 Implementing Server Side Rendering using React and Express 2 Adding style to Server-Side rendering and automating the build process.

Server-Side Rendering - SurviveJS

Server -Side Rendering (SSR) is a technique that allows you to serve an initial payload with HTML, JavaScript, CSS, and even application state....

Intro to React Server Side Rendering | by Suhan Wijaya

[B] This tells webpack to preprocess .js files with babel-loader , which transpiles ES6+ and JSX code into JavaScript code that is readable...

React server side rendering - failure on `style-loader` of ...

How do I resolve this error? var path = require('path'); var webpack = require('webpack'); var nodeExternals = require('webpack-node-externals' ...