Webpack loader to collect your CSS styles when you renderToString
npm install style-collector-loaderReact.renderToString( ).When doing server-side rendering, your do not want FOUC (flash of unstyled content). However, if you are using the CSS loader, your styles will not be loaded in the browser until your React application is mounted.
To fix this problem, you can use the style-collector-loader to collect the CSS the client will need. Once the React application is loaded, you can remove it from the DOM.
npm i -S style-collector-loaderrequire('./Component.css'); inside componentWillMount and not componentDidMount or anywhere elsewebpack.config.js
``javascript`
// ...
module.loaders = [
{ test: /\.css$/, loader: 'style-collector!css' },
{ test: /\.scss$/, loader: 'style-collector!css!sass' },
{ test: /\.(png|jpe?g)(\?.*)?$/, loader: 'url?limit=8192'},
{ test: /\.(svg|ttf|woff2?)(\?.*)?$/, loader: 'file'}
];
// ...
server.jsx
`javascript
// ...
global.__STYLE_COLLECTOR_MODULES__ = [];
global.__STYLE_COLLECTOR__ = '';
var html = React.renderToString(
var css = global.__STYLE_COLLECTOR__;
data = data.replace('', '');
// ...
`
client.jsx
`javascript
// ...
React.render(
var styleEl = document.getElementById('css-style-collector-data');
if (styleEl) {
styleEl.remove();
}
// ...
``