MinEMemO

【Gatsby】Netlifyで一部CSSが反映しない

📝 更新日:2023-02-26 / 📄 作成日:2023-02-25
Hero Image
目次

はじめに

GatsbyでbuildしてNetlifyでデプロイしたら一部CSSが反映しない!という事象が出ました。

状況は以下の通り

  1. gatsby develop 反映してる ⭕
  2. gatsby build → gatsby serve 反映してる ⭕
  3. gatsby build → GitHub → Netlify 反映しない ✖

解決方法

CSSはきちんと書こうってことでした。

CSS

↓✖NGなパターン

body {
  font-family: "Helvetica Neue",
    Arial,
    Meiryo;
}
CSS

↓⭕OKなパターン

body {
  font-family: "Helvetica Neue",
  "Arial",
  "Meiryo";
}

インターネットで信頼している記事を参考に気軽にコピペで使ったのですが、 クォーテーションが合ったりなかったりしたら、Netlify側でうまく反映出来ない感じでした。

追記

以下もダメでした。
エラー出ないし。Netlifyに反映しないだけなので厄介なので、今後また発生しだい追記しようかと思います・・・。

CSS

↓✖NGなパターン

body {
  padding: 8px 0 8px 0;
}
CSS

↓⭕OKなパターン

body {
  padding: 8px 0px 8px 0px;
}
本当に凡ミスでした。
ただ、Netlifyのデプロイの時だけ失敗する。
という状況で、原因が判明したのも勘で偶然できただけでかなり時間がとられました・・。
profile_icon
taka
プログラマー
いつでも転職希望の業務経験7年目(2023時点)のエンジニアです。 仕事の合間にすこしずつ転職活動はしていますが、条件が合う場合ぜひTwitterなどでご連絡頂けると嬉しいです。 希望条件は基本的に残業は1日x1h程度。収入は一旦現状維持。 ある程度で構わないので、保守運用が管理されていて、精神的に安心して働ける環境が良いです。 経験言語はHTML、CSS、javascript、PHP、MySQL、Docker、Vuejs、Laravel このブログは完全に自作で静的ジェネレータで作りました。 この範囲で言えば React.js Gatsby.js GraphQLも経験があります。 最近はAIがどう社会に受け入れられ、日常になっていくのかの行く末が気になっています。 今までの人生で一番変化を感じて不思議な感覚です。