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

スポンサードリンク