Universal Architecture_html/css_WEB-ITnose の CSS モジュール問題を解決する

最近、React と Redux を使用して Isomorphic JavaScript (Universal) アプリケーションを構築しています。

しかし、CSS モジュールを実装する場合、次の 2 つの問題が発生します:

サーバー側 Node.js は *.css をインポートできません。

クライアント側のインポートのみを判断するために process.env.IS_BROWSER を使用するように変更すると、サーバー側とクライアント側の render からの DOM 結果が矛盾するという問題が発生します。

解決策:

css-modules-require-hook パッケージをインストールします:

npm install css-modules-require-hook --save-dev

webpack 構成の css-loader 設定を変更します:

// webpack.config.js{  // ...  module: {    loaders: [{      test: /\.css$/,      loader: 'style-loader!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]!!postcss-loader'    }]  }  // ...}

Node.js のメイン ファイルに css-modules-require-hook を追加します。

// server.jsrequire('css-modules-require-hook')({  generateScopedName: '[name]__[local]___[hash:base64:5]'});// ...

generateScopedName の命名形式は css-loader の localIdentName と一致している必要があることに注意してください。