Ad

React Server Side Rendering Of CSS Modules

- 1 answer

The current practice for CSS with React components seems to be using webpack's style-loader to load it into the page in.

import React, { Component } from 'react';
import style from './style.css';

class MyComponent extends Component {
    render(){
        return (
            <div className={style.demo}>Hello world!</div>
        );
    }
}

By doing this the style-loader will inject a <style> element into the DOM. However, the <style> will not be in the virtual DOM and so if doing server side rendering, the <style> will be omitted. This cause the page to have FOUC.

Is there any other methods to load CSS modules that work on both server and client side?

Ad

Answer

You can have a look at the isomorphic-style-loader. The loader was specifically created to solve this kind of issues.

However for using this you have to use an _insertCss() method provided by the loader. The documentation details how to use it.

Hope it helped.

Ad
source: stackoverflow.com
Ad