Gatsbyでbuildしたあとのページを確認するとcssが適用されていない問題
まさに表題のとおりだが、gatsby build したあと、 gatsby serve で本番と同様の環境でアクセスすると、cssが適用されていない問題があった。しかもcssが適用されていないページは一部だけという内容。
一瞬頭を悩ませたが、単純にそのページでcssファイルのimportを行っていないだけだった。
問題としてはとても初歩的でとるに足らないものだが、このページ、gatsby developした時点ではcssは読み込まれた状態となって表示されていたので、それが頭を悩ませる要因だった。
以上、ちょっとした備忘録となります。
と、ここで終わるのも良かったが、一応こういう問題はGatsby界隈では他のケースでも起こっているようで、私のような初歩的なミスではないパターンも存在する。
もしそのような問題でこのページにたどり着いた方がいたら申し訳ないので、もっとしっかりと原因(?)でproduction build後にcssが適用されないケースについて紹介する。といっても下記のissueを貼るだけだが。
上のissueの概要はこんな感じだ。
現在、gatsby build & gatsby serveを実行して、ページを表示させると一部のスタイルが最初に読み込まれません。しかし、アプリ内の他のページに移動すると、すべてのスタイルは正しく読み込まれます。どのスタイルが読み込まれないのかを特定しようとしていますが、現時点ではコンソールエラーやネットワークエラーは発生していません。 jsxstyleを使用しています。開発用のビルドを実行しても問題はありません。
たぶんこういう問題に当たる人は多そうな気がする。
もし似たような問題にぶつかっている人がいたら、ぜひ上のissueを参照してみてほしい。
Gatsbyはpluginなどを駆使して簡単にいい感じの機能を持ち合わせたサイトを作成できるツールだが、いざしっかりとサイト構築を行おうとすると、細かい問題にぶつかる可能性はそれなりに高い印象がある。
そういえば以前 gatsby-plugin-offline に関する記事を投稿したりもしていた。
サイト構築の利便性のために抽象化した弊害もあると思うし、そこは付き合っていく上では仕方のない部分だ。
私自身はGatsbyはとても良いツールだと思っているし、実際便利なので、今後もうまく付き合っていきたいと思っている。
何故か最後自分の気持ちを表明する、という謎の展開を見せてしまったが、とりあえず以上である。
