Nextアプリでant.designのCSSをモジュールごとに読み込もうとした

NextJSではant.designを使うサンプルが提供されています。このサンプルではCDNからCSSをロードしています。バンドルのサイズも大きくなるので、モジュールごとに読み込める方法を模索しました。しかし、今の段階では有効の方法がないという結論に落ち着きました。

以下は自分の備忘録としてやったことをまとめます。

Babel-import-pluginでCSSも同時に読み込む

ant.designをモジュールごとに読み込むためのbabelプラグインがant.designから提供されています(babel-import-plugin)。このプラグインではオプションとして

["import", { "libraryName": "antd", "style": true }]とやるとLESSを読み込み

["import", { "libraryName": "antd", "style": "css" }]でCSSを読み込みます。

残念なことに、NextJSではまだCSSのファイルインポートを実装していません。そのためこのようにCSSを同時に読み込もうとすると、バンドルする際に.cssを理解できないと怒られてしまいます。CSSをバンドルする際にどう処理すればいいかを指定するCSSローダーをウェブパックの設定に追加すればいいのですが、それは推奨されていません

どうにかできないかといろいろ調べましたが、解決することはできませんでした。

CSSを文字列として読み込む

CSSを直接理解出来ないなら、CSSを文字列として読み込みstyleタグの中に埋め込もうというのがこのアプローチです。このアプローチは確かにモジュールごとに読み込めるようにはなったのですが、使われるコンポーネントごとにCSSが出力されるという(バンドルサイズ的に)嬉しくない結果になりました。方法はこのPRと一緒です。

結果

おとなしくNext/headのなかで<link>タグで読み込むことにしました。Next5ではCSSサポートが出るようなのでそれに期待したいと思います。