React Server side rendering of CSS modules

Question

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 try this postcss plugin: github.com/ctxhou/postcss-hash-classname . I found the style loader only limit to the webpack, so with this plugin, you can extract the css class name as a js object file. Then you can require this style.js and use the same code. Because this is a .js file, of course it can support server side rendering. You can check the repo to know more : ) — Chen-Tai
– Chen-Tai, Commented Jan 5, 2016 at 20:15
The problem I'm looking to solve is to make webpack inject the CSS into the virtual DOM so server side rendering also has CSS packed. I don't think that one has anything related to this task? — willwill
– willwill, Commented Jan 6, 2016 at 0:58
You mean you don't want to create another css file and only want the webpack to help you inject it ? — Chen-Tai
– Chen-Tai, Commented Jan 6, 2016 at 21:00

Filip Dupanović · Accepted Answer · 2016-01-06 09:22:24Z

11

You can use webpack/extract-text-webpack-plugin. This will create a independently redistributable stylesheet you can reference then from your documents.

answered Jan 6, 2016 at 9:22

Filip Dupanović

33.8k14 gold badges89 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Flion Over a year ago

that doesnt help with the combination of css modules and server side rendering

Community · Accepted Answer · 2020-06-20 09:12:55Z

10

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 18, 2016 at 18:42

sandeep

2,1381 gold badge12 silver badges13 bronze badges

Comments

Eric Tan · Accepted Answer · 2019-06-13 23:44:49Z

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.

answered Jun 13, 2019 at 23:44

Eric Tan

1,46317 silver badges14 bronze badges

3 Comments

user3125823 Over a year ago

when mention sass, sass-loader, autoprefixer etc - do I also need to setup webpack to handle those for the server-side?

Eric Tan Over a year ago

yes, you need to setup those up for server side as well.

Tom Pietrosanti Over a year ago

Is there a way to do this using only one set of config - for example, creating a library which will be used for either server- or client-side rendering? (Unknown at build time)

Collectives™ on Stack Overflow

React Server side rendering of CSS modules

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related