isomorphic-style-loaderの使い方

react

github.com

概要

  • Critical CSS を <head></head> の中にサーバ側で展開するためのプラグイン。クライアント側もサーバ側も同じwebpack設定で用いる。
  • ただのstyle-loaderだとサーバ側は使用できない（DOM操作を伴うのでビルド時にエラーになる）。そのためサーバ側でHTMLコンテンツだけ組み立てて（半SSRみたいな形で）Responseを返すと、クライアント側で FOUC が発生してしまう（HTMLレンダリング --> JS読み込み --> <head>内にCSS展開 --> 適用 という順番で評価されるため）。これを回避するためにSSR時にCSSも展開しちゃおうぜ！みたいなモチベーション。

fix support server side usage by magalhas · Pull Request #115 · webpack/style-loader · GitHub

URL

Using with react-router · Issue #15 · kriasoft/isomorphic-style-loader · GitHub

[request] Example without usage of a boilerplate kit, css-modules or withStyles · Issue #10 · kriasoft/isomorphic-style-loader · GitHub