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 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.
You can use webpack/extract-text-webpack-plugin. This will create a independently redistributable stylesheet you can reference then from your documents.
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:
module: {
rules: [
{
test: /\.(css)$/,
include: [
path.resolve(__dirname, '../src'),
],
use: [
{
// Interprets `@import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader/locals',
options: {
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]'
}
},
],
},
]
}
On client side, the webpack config looks like this
{
// Interprets `@import` and `url()` like `import/require()` and will resolve them
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]'
}
},
Off course, if you are using SASS, you need to use sass-loader to compile scss to css, and postcss-loader can help to add the autoprefixer.
