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.

Answer 1

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.

Answer 2

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.

Answer 3

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