bootstrap-vueのcssが警告が出て読み込めません。

WEBアプリを制作し、デプロイを終え問題なくWEB上で動いていたのですが、ある日を境にWEBアプリのディスプレイが部分的に左寄りになってしまいました。調べるとbootstrap-vueのcssが読みこまれなくなっていたので、それが原因だと考えています。また、実装環境と開発環境で同じエラーが出ていたので、サーバー側に問題はないかと思っています。

開発環境ではdjangoのrunserverを使っています。
実装環境ではAWSのEC2でミドルサーバーにNginxとgunicornを使っています。

WEBアプリ

発生している警告

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://unpkg.com/bootstrap/dist/css/bootstrap.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css".

html

html
1<head>
2    <meta charset="UTF-8">
3    <meta name="viewport" content="width=device-width, initial-scale=1.0">
4    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
5    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
6    <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
7    <link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP" rel="stylesheet">
8    {% block extra_head %}{% endblock %}
9    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
10    <script src="https://unpkg.com/vue-star-rating@1.7.0/dist/VueStarRating.umd.min.js"></script>
11    <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
12    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
13    <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
14    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
15    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
16    <script src="https://cdn.rawgit.com/SSENSE/vue-carousel/6823411d/dist/vue-carousel.min.js"></script>
17</head>

chromeのディベロッパーのネットワークを確認すると３０２が出ていました。

自分なりに調べたのですが、解決策が分かりませんでした。
お詳しい方がお見えになりましたら、ご助力いただけると幸いです。

至らない点が多々あるかと思いますがよろしくお願いします。

退会済みユーザー

2021/05/07 07:23

Chromeの新タブなどで直接「https://unpkg.com/bootstrap/dist/css/bootstrap.min.css」とか「https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css」って入力したとき、cssファイルとしてダウンロードできていますか？プロキシー環境下のサーバーとかで、プロキシーを越えられていない、なんてことはないでしょうか。

ASAP0514

2021/05/07 07:47 編集

回答ありがとうございます。両者とも検索をかけたところ、cssの内容が表示されました。ですのでファイルとしてダウンロードはされなかったということで間違い無いでしょうか？また、プロキシに関してですが、何も設定していなかったので、現状では問題ないかと考えています。よろしくお願いします。

Lhankor_Mhy

2021/05/08 00:36

ご提示の「WEBアプリ」のリンクを拝見しましたが、当方の環境ではご提示のエラーを確認することができませんでした。

ASAP0514

2021/05/08 00:47

回答ありがとうございます。確認なのですが、headerの文字は全て左寄りになっていましたか？もしそうであれば、別の箇所が問題かもしれないので、もう少し調べてみます。

Lhankor_Mhy

2021/05/08 01:06

navbar の内容物のことでしたら、左寄せになっています。

ASAP0514

2021/05/08 02:53

では、別の場所に問題がありそうですね。もう少し調べてみます。

行動規範の内容に同意します

回答1件

自己解決

原因：CDNで読み込んでいたcssがバージョンの関係か、内容が変わっていたと考えられる。
解決策：バージョンを固定して記述することで解決したと考えられる。

###変更前

html
1<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />

###変更後

html
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">