web-dev-qa-db-ja.com

React CSSモジュールのサーバー側レンダリング

Reactコンポーネントを使用したCSSの現在のプラクティスは、webpackのスタイルローダーを使用してページにロードするようです。

import React, { Component } from 'react';
import style from './style.css';

class MyComponent extends Component {
    render(){
        return (
            <div className={style.demo}>Hello world!</div>
        );
    }
}

これを行うことにより、スタイルローダーは<style>要素をDOMに追加します。しかし <style>は仮想DOMに含まれないため、サーバー側のレンダリングを行う場合、<style>は省略されます。これにより、ページは [〜＃〜] fouc [〜＃〜] になります。

ロードする他の方法はありますか CSSモジュール サーバー側とクライアント側の両方で動作しますか？

reactjswebpackwebpack-style-loader
25
willwill

isomorphic-style-loader を見ることができます。ローダーは、この種の問題を解決するために特別に作成されました。

ただし、これを使用するには、ローダーが提供する_insertCss()メソッドを使用する必要があります。ドキュメントには、使用方法の詳細が記載されています。

それが役に立てば幸いです。

6
sandeep

webpack/extract-text-webpack-plugin 。これにより、ドキュメントから参照できる独立した再配布可能なスタイルシートが作成されます。

11
Filip Dupanović

私にとっては、Webpackローダー css-loader を使用して、同形アプリケーションにCSSモジュールを実装しています。

サーバー側では、webpackの構成は次のようになります。

  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]'
            }
          },
        ],
      },
    ]
  }

クライアント側では、webpackの設定は次のようになります

          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          },

もちろん、SASSを使用している場合は、sass-loaderからscssをcssにコンパイルし、postcss-loaderはautoprefixerの追加に役立ちます。

0
Eric Tan