このような静的サイトジェネレーターの有名所としてあるReact製のGatsby jsを使用した際、

開発時は問題なかったのに

実際ビルドしてみて確認すると

CSSのStyleが全く反映されておらず、表示崩れを起こすことがあります。

あまり記事として、日本語の記事が少なかったので、ご紹介しておきます。

→ 参考

問題

Developモードのときは、正常に表示されCSSも効いていたのですが（今回僕はmaterila ui追加ました）、

$ gatsby build

し、

$ gatsby serve

で、本番用で確認すると表示崩れをしてしまいました。

リサーチ

とりあず、全く検討がつかなかったので、なにかプラグインが必要なのかも？

と思い、早速ググったところいくつか該当記事が出てきました。

• gatsby v2でmaterial-ui v3でgatsby build (production)すると、developで綺麗に表示されていたcssが崩れる
• Github
• Github

※ React製のGatsby.jsですが、とりあえずなにかするごとにプラグインが必要で、 インストールしたらconfig.jsに追記していけば、やってくれます。

3つ目の記事に「gatsby-plugin-material-ui」を入れろと書いてあるのでやってみる

対応方法

• gatsby-plugin-material-ui をインストール

  $ yarn add gatsby-plugin-material-ui

• gatsby-config.jsに、リファレンスの通りプラグイン設定

plugins: [
    {
      .
      .
      .

      resolve: `gatsby-plugin-material-ui`,
      options: {
        stylesProvider: {
          injectFirst: true,
        },
      },
    },
    `gatsby-plugin-styled-components`, // 下の方うにもともと記載がるので、ここの↑に追加
  ],

これで、治りました！

まとめ

Gatsbyはほんとにたくさんのpluginが用意されています。

なにか問題あったら、基本対応してくれるプラグインがあるはずなので、探してみて下さい。