React Server side rendering of CSS modules
Solution 1
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.
Solution 2
You can use webpack/extract-text-webpack-plugin
. This will create a independently redistributable stylesheet you can reference then from your documents.
Solution 3
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
.
willwill
Junior Architect at Wongnai. Born and currently living in Bangkok, Thailand. Also working on my not-so-pet project TipMe
Updated on June 14, 2020Comments
-
willwill almost 4 years
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?