CSSが適用できない

今回、CSSが正常に適用できなかったので原因の解決をメモしたいと思います。

エラー内容

Refused to apply style from 'http://localhost:8080/vacations/css/bootstrap.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

原因

「MIMEタイプがサポートされていない」とは書いてありましたが、それが原因ではなく起点となるパスを見つけることができなかったと考えられます。

解決

CSSを読み込む前に以下のコードを挿入する。

<base href="/">
・・・CSS読み込み・・・

<base>とは

「BASE」とは、ページに記載されたリンク先URLの基準となるURLや、基準となるターゲットウインドウ(ターゲットフレーム)を指定するタグです。<base>タグは<head>タグの子要素そてい指定します。
この基準となるURIは、リンクや画像、フォームなど、その文書内の全ての相対URIで使用されます。また、target属性を使用すると、リンク先の表示方法のデフォルトを指定することが可能です。 <base>タグによる指定をしない場合は、その文書自身の位置が基準URIとして設定されます。

簡単にいうと基準となる絶対アドレスとのことらしいです。(absolute URL)

ex) href=“http://www.tcpschool.com/”

参考

https://github.com/froala/angular-froala/issues/170#issuecomment-390398548

https://qiita.com/baby-0105/items/0356b0af4ab4585d86c4

コメントを残す