1. ホーム
  2. html

[解決済み] MIME-typeが原因でスタイルシートが読み込まれない

2022-03-15 08:26:48

質問

を使用するウェブサイトを制作しています。 gulp でコンパイルし、ブラウザ同期で私の変更とブラウザを同期させ続けます。

gulpタスクはすべてを適切にコンパイルしますが、ウェブサイト上ではスタイルが表示されず、コンソールにはこのようなエラーメッセージが表示されます。

からのスタイル適用を拒否されました。 ' http://localhost:3000/assets/styles/custom-style.css その理由は MIME タイプ ('text/html') がサポートされていないスタイルシートの MIME タイプであり、かつ 厳密なMIMEチェックが有効になっています。

さて、なぜこのようなことが起こるのか、よく理解できません。

HTMLにはこのようなファイルが含まれています(これは間違いないと思います)。

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

そしてスタイルシートは、今のところBootstrap & font-awesomeのスタイルをマージしています(まだカスタムは何もしていません)。

フォルダ構成はこのようになっているので、パスも正しいです。

index.html
assets
|-styles
  |-custom-style.css

でも、ずっとエラーが出るんです。

何が原因なのでしょうか?gulp/browsersyncの何か(多分設定?)でしょうか?

解決方法は?

問題は、コメントで始まるCSSライブラリにあったと思います。

開発中は、ファイルのminifyはしないし、コメントも削除しない。そのため、スタイルシートがコメントで始まってしまい、CSSとは異なるものとして見られてしまうことがありました。

ライブラリを削除して、(コメントなしで常に最小化される)ベンダーファイルに入れることで、問題は解決しました。

繰り返しになりますが、これが修正だと100%確信しているわけではありませんが、期待通りに動作するようになったので、私にとっては勝利です。