【Gatsy js】Production だとCSSが効かない時
April 14, 2020

DEVELOPMENT

web
node
Gatsby
js

最近では、hugoやhexoを始めとする、markdownで記事を記述でき、簡単にブログサイトを作成できる静的サイトジェネレーターは色々ありますが、

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

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

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

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

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

参考

問題

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

$ gatsby build

し、

$ gatsby serve

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


リサーチ

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

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

※ 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が用意されています。

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

うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

🙏よかったらシェアお願いします🙏
WRITTEN BY
うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

CONACT
入力して下さい
Slack からもどうぞ

※お気軽にどうぞ!(6月20日まで有効!お早めに)

COPYRIGHT © 2020 UKAI CO., LTD. ALL RIGHTS RESERVED.