[解決済み] MIME-typeが原因でスタイルシートが読み込まれない
質問
を使用するウェブサイトを制作しています。
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%確信しているわけではありませんが、期待通りに動作するようになったので、私にとっては勝利です。
関連
-
[解決済み】スタイルシートとして解釈されるリソースがMIMEタイプtext/htmlで転送される(Webサーバーとは関係ないようです)。
-
[解決済み] .docx、.pptxなどの正しいMIMEタイプは何ですか?
-
iframeフレームワークの使用
-
[解決済み] slackのチームIDやチャンネルIDを調べる最も簡単な方法は何ですか?
-
[解決済み] 正しいJSONコンテンツタイプは何ですか?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] HTMLでBase64画像を表示する方法
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] HTML5でminlengthの検証属性はありますか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] bootstrapでボタンにリンクを貼るには?
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] ボディの高さをブラウザの高さの100%にする
-
[解決済み] HTMLでBase64画像を表示する方法
-
[解決済み] HTMLアンカーは'name'と'id'のどちらで作成するのが良いですか?
-
[解決済み] 静的な HTML ページにファビコンを追加する
-
[解決済み] div内の画像の下に余分なスペースがある