expreeのstaticで静的ファイルを指定したものの、呼び出せなくて困っています。

Question

前提・実現したいこと

https://note.com/rubymade/n/nafa8c82bd4cc
シンプルにこのサイト通り、firebaseのhosting機能を使ってbasic認証をかけながら静的なサイトを公開しようとしています。
下記の該当のソースコードにあるように、expressのstaticに使用したいフォルダを指定し、firebase deployしていますが、deploy完了後、指定のurlにリクエストすると、何故かcssのファイルだけhtmlから読み込めない事態が発生しています。

発生している問題・エラーメッセージ

static以下にassets, css, jsディレクトリとtopPage.htmlがあり、そのstaticディレクトリをexpressのstaticメソッドで指定。

firebase deployが完了し、指定のurlを見てみると、、

↑このような感じで、topPage.cssについて、MIMEタイプがtext/htmlで読み込めてない！とエラーメッセージ。
しかし、html的には、MIMEタイプをちゃんと指定しています。

恐る恐る、ホスト部分/css/topPage.cssにリクエスト送ってみると、、
![]
↑と記載されていて、そもそもcss/topPage.cssがサーバー上にないことが確認できます。

念の為、devツールのsourcesを見てみると、

cssとasstsディレクトリが読み込まれてないことが分かります。

ただし、assetsに付いては、

↑このように、何故かリクエストに答えてくれるのでちゃんと読み込まれている？
ような気がします。。

該当のソースコード

読み込まれていないtopPage.cssの一部のコードを記載します。

@charset "utf-8";
@import "core/common.css"; /* reset含め、初期設定のcssデータをここで読み込む */

#top-page {
  width: 100%;
  background-color: #f8f8f8;
}

・
・
・
あまりに長いので以下省略します。

参考にしたサイトをそのままコピペしているfirebase.json

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
 }

推測

htmlのbody内では相対パスが使用できるけど、head内では相対パスが使えなく、そのせいで単純にcssのパス指定がうまくいっていないのだろうか、、と今考えていますが、そもそもdevツールで、

Refused to apply style from 'https://xxx.firebaseapp.com/css/topPage.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

と言うように、https://xxx.firebaseapp.com/css/topPage.cssとちゃんと相対パスが変換されて表示されているので推測が外れました。

cssに

@import "core/common.css"; /* reset含め、初期設定のcssデータをここで読み込む */

があることが原因でしょうか。。

何かヒントのレベルでも構いませんので、なんでもご意見、ご回答いただけますと幸いです。何卒、よろしくお願いします。

Answer 1

お騒がせしました。。。単なるファイル名のタイプでした。。
topPage.cssではなく、toppage.cssとなっていただけでした。。。