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?
You can use
webpack/extract-text-webpack-plugin
. This will create a independently redistributable stylesheet you can reference then from your documents.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.
For me, I am using the Webpack loader css-loader to implement CSS modules in isomorphic application.
On server side, the webpack config will be like this:
On client side, the webpack config looks like this
Off course, if you are using SASS, you need to use
sass-loader
to compile scss to css, andpostcss-loader
can help to add theautoprefixer
.