はじめに
HTML, JavaScript, CSSで構築された既存のサイトを、Gatsbyで再構築しています。
以前、Gatsbyでページごとに個別にCSSを読み込む方法という記事を書きました。
しかし、その後作業を進めていくうちに、こちらの方法では問題を解決できないことがわかりました。
今回は改めて対策方法を検討したので、共有します。
前回の内容
前回はこのような方法でページごとに個別にCSSを読み込むことができると言いました。
import React from "react"
export default () => (
require("style.css")
)
しかし、この内容でNetlifyにアップロードしたところ、うまくいきませんでした。
個別ページで読み込んだハズのCSSが、全てのページで読み込まれてしまい、上書きされてしまうという現象が再発してしまいました。
Gatsby Develop と Gatsby Serve の違い
原因を調べると、上記の方法は gatsby develop ではうまく動作するものの、
gatsby serve したものではうまく動作していませんでした。
Netlifyにアップロードされるのは gatsby serve の方です。
新・ページごとに個別にCSSを読み込む方法
とういうことで、gatsby serve でもうまくいく方法を紹介します。
- 既存のCSSの拡張子
.cssを.scssに変更する - ファイルを開き、先頭と末尾を
html.hoge{}で囲む
#header{
background-color:red;
}
html.hoge{
#header{
background-color:red;
}
}
3.読み込みたいページ（例：hoge.js）でimportする
import React from "react"
import "../css/home.scss"
export default () => {
return(
//ページの処理
<header id="header">ヘッダー</header>
)
}
4.「Helmet」を使ってhtmlタグにhogeというクラス名を付ける
import React from "react"
import { Helmet } from "react-helmet"
import "../css/home.scss"
export default () => {
return(
<div>
<Helmet>
<html className="hoge" lang="jp" />
</Helmet>
//ページの処理
<header id="header">ヘッダー</header>
</div>
)
}
以上です。
Helmetの使い方は「Gatsby Helmet」などで調べてみてください。
おわりに
今回のやり方はかなり邪道な方法です。
お気づきかもしれませんが、このやり方はページ毎に個別に読み込んではおらず、
結局全てのCSSを読み込んでしまっています。
単純に、SCSSのネストでセレクタを指定することで、ページごとに適応するものを変えているだけです。
Gatsbyが提唱するサイトの高速化の手法をあえて無視するようなやり方です。
今回はとりあえず、一般的な HTML, CSS, JavaScript で組まれたWEBサイトを
あまり手を加えずにGatsbyにコンバートすることを試してみました。
ですが、その作業がこんなにも大変だとは思いませんでした。
WordPressみたいに、最初は静的ファイルでテストページを作成して、その後CMS化する
という手法はあまり馴染まないのかもしれないですね。
ある程度初期の段階から、Gatsbyで組み上げていったほうが早いかもしれません。
次回は、GatsbyでjQueryを使う方法（邪道）を書きたいと思います。