Gatsbyでページごとに個別にCSSを読み込む方法

#はじめに
HTML, JavaScript, CSSで構築された既存のサイトを、Gatsbyで再構築しています。

一般的なサイトでは、CSSの読み込みは

<link rel="stylesheet" href="style.css">

でページごとに読み込むCSSを指定できますが、Gatsbyの場合は少し特殊だったのでメモを残します。

#Gatsbyでの一般的なCSSの読み込み方法

1. gatsby-browser.jsで読み込む
2. importで読み込む
3. CSSモジュールを使う

上記の1.の方法は、全ページで使用するCSSの読み込みに適しています。

2.の方法は一見ページごとに個別に読み込むかと思いきや、グローバルスタイルとして読み込まれるので全てのページに反映されてしまいます。

3.の方法は個別にCSSを指定する方法ですが、モジュール化して、要素ごとにclassNameを記述して・・・と既存コードの書き換えが面倒です。

これらの方法は、Gatsbyで推奨されている方法で、サイト高速化のためには取り組むべきことだと理解しています。
ですが、とりあえずGatsbyで動かしたいんだー、面倒なことは後から調整したいんだー！という方は以下の方法を試してみてください。

#ページごとに個別にCSSを読み込む方法
結論から言うと以下の方法で、実現できます。

import React from "react"

export default () => (
       require("style.css")
)

各ページの export default の中で require で読み込むことで、
ページごとに個別にCSSを読み込むことができます。

コンポーネント化していて、ページごとに.jsファイルがないという場合は、
下記のようにページ名で場合分けしてCSSを読み込み分けすることができます。

 import React from "react"
 import { withPrefix } from "gatsby"

 export default ({location}) => (
        if (location.pathname == withPrefix ("/pageName/")){
            require("pageName.css")
         }
 )

以上、急場しのぎ的な方法ですが、お試しください。