CSSの読み込みで「its MIME type (‘text/html’) is not a supported stylesheet MIME type」エラーが表示されて読み込みができない場合の解決方法

最近SSIを使ったときにCSSのスタイルが反映されず、Google Chromeの開発者ツールで下記のエラーが出ていました。
Refused to apply style from ‘[CSSのファイルパス]’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled
直訳すると下記の通りです。
厳密なMIMEチェックが有効になっていて、なおかつMIMEタイプがサポートされているものではないため、'[CSSのファイルパス]’からのスタイル適用を拒否しました。
MIMEタイプというのはCSSを読み込むときの「type」属性内に入力するものです。
これを入力することで「このファイルはCSSファイルです」と明示的に示せます。
<link href="style.css" rel="stylesheet" type="text/css">このMIMEタイプがサポートされているものではない(「text/html」になっている)というエラーです。
しかし実際はファイルパスが原因の場合が多いみたいです。
ファイルパスを確認する
MIMEタイプを間違えて入力していることは少なく、ほとんどの場合は「hrefでのパス指定が間違えている」みたいです。
特に今回の場合はSSIを使っていたため、相対パスを使う場合はSSIの読み込み先から位置を指定する必要がありました。
パスを指定しなおすとエラーは解消されて無事スタイルが適用されました。
念のためtype指定も確認する
普通にテキストエディタを使っていると自動で補完されるため、CSSファイルの読み込みなのに「text/html」になっていることはまず無いと思います。
ただ、念のため<link>タグを確認して、type属性が「text/css」になっているか確認しましょう。



ブラウザでこれ以上スクロールできない場合の挙動を制御する「overscroll-behavior」プロパティ
HTMLが書ければすぐ習得できるテンプレートエンジン「EJS」の基本的な書き方
Visual Studio Codeの文字サイズやタブサイズの設定方法
Nuxt.jsで「Classic mode for store/ is deprecated and will be removed in Nuxt 3.」のエラーメッセージが表示される場合の対処法
Nuxt.jsでのページ遷移設定方法(Vue Routerやnuxt-link)|Nuxt.jsの基本
Webデザイナーを目指す専門学生が技術ブログを書くメリット
コーディング時に「アノテーションコメント」を使ってコードを見やすく管理する
SVGを操作するためのCSSプロパティまとめ
SafariのURLメニュー部分も考慮できるCSSの単位「dvh」
Local by Flywheelの「Starting Local Machine…」画面から進まないときに試すこと
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理