firebaseでdeployした後、CSSが反映されない時の解決策

こんにちは、カナダ在住フリーランスのokohです。
引き続きプログラミングの勉強中でございます。

「firebaseでCSSが反映されない」

という問題に出会った方はいませんか？

 firebaseでCssが反映されない…

僕は先程初めてfirebaseでdeployしてみたのですが、作ったポートフォリオサイトが、CSSでの装飾が全く表示されずにサイトがアップロードされていました。

そこで少し調べてみた所、
どうやらindex.htmlの記述のどこかに問題がある、またはキャッシュ関連の問題の可能性が高いということで、HTMLを見てみました。

①HTMLのCSSの文字サイズ｜CSSが反映されない時の解決策

index.htmlを見てみると、
headタグ内にある、CSSを読み込むために書いた

<link rel=”stylesheet” href=”css/styles.css”>

この記述の、「css」部分が小文字になっていました。

CSSの実際のフォルダを参照すると？

そしてstyles.cssが入ったフォルダの名前を見ると、「css」が大文字でした。

そのため、index.html内の上の記述、

<link rel=”stylesheet” href=”css/styles.css”>

のcssを以下のように大文字にしました。

<link rel=”stylesheet” href=”CSS/styles.css”>

もう一度firebaseでdeployするとCssが反映された

そしてもう一度deployして更新ボタンを押すと、無事反映されていました。

※後にフォルダ名は小文字(css)にしました。

またCSSが反映されない…

その後、cssに少し変更を加えてdeployした所、また反映されないという問題が発生しました。

色々試したのですが、最終的に、

「ブラウザにてキャッシュの削除」

をしたところ解決しました。

クロームの履歴のところからキャッシュのクリア

これをしたら、やっとこさ変更も適用されました。

okoh