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

はじめに

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

以前、Gatsbyでページごとに個別にCSSを読み込む方法という記事を書きました。
しかし、その後作業を進めていくうちに、こちらの方法では問題を解決できないことがわかりました。
今回は改めて対策方法を検討したので、共有します。

前回の内容

前回はこのような方法でページごとに個別にCSSを読み込むことができると言いました。

importReactfrom"react"exportdefault()=>(require("style.css"))

しかし、この内容でNetlifyにアップロードしたところ、うまくいきませんでした。
個別ページで読み込んだハズのCSSが、全てのページで読み込まれてしまい、上書きされてしまうという現象が再発してしまいました。

Gatsby Develop と Gatsby Serve の違い

原因を調べると、上記の方法は gatsby developではうまく動作するものの、
gatsby serveしたものではうまく動作していませんでした。
Netlifyにアップロードされるのは gatsby serveの方です。

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

とういうことで、gatsby serveでもうまくいく方法を紹介します。

既存のCSSの拡張子.cssを.scssに変更する
ファイルを開き、先頭と末尾をhtml.hoge{}で囲む

hoge.css

#header{background-color:red;}

hoge.scss

html.hoge{#header{background-color:red;}}

3.読み込みたいページ（例：hoge.js）でimportする

hoge.js

importReactfrom"react"import"../css/home.scss"exportdefault()=>{return(//ページの処理<headerid="header">ヘッダー</header>
)}

4.「Helmet」を使ってhtmlタグにhogeというクラス名を付ける

hoge.js

importReactfrom"react"import{Helmet}from"react-helmet"import"../css/home.scss"exportdefault()=>{return(<div><Helmet><htmlclassName="hoge"lang="jp"/></Helmet>
//ページの処理<headerid="header">ヘッダー</header>
</div>
)}

以上です。
Helmetの使い方は「Gatsby Helmet」などで調べてみてください。

おわりに

今回のやり方はかなり邪道な方法です。
お気づきかもしれませんが、このやり方はページ毎に個別に読み込んではおらず、
結局全てのCSSを読み込んでしまっています。
単純に、SCSSのネストでセレクタを指定することで、ページごとに適応するものを変えているだけです。
Gatsbyが提唱するサイトの高速化の手法をあえて無視するようなやり方です。

今回はとりあえず、一般的な HTML, CSS, JavaScript で組まれたWEBサイトを
あまり手を加えずにGatsbyにコンバートすることを試してみました。
ですが、その作業がこんなにも大変だとは思いませんでした。

WordPressみたいに、最初は静的ファイルでテストページを作成して、その後CMS化する
という手法はあまり馴染まないのかもしれないですね。

ある程度初期の段階から、Gatsbyで組み上げていったほうが早いかもしれません。
次回は、GatsbyでjQueryを使う方法（邪道）を書きたいと思います。