bootstrapのcssが読み込めない
WEBアプリを制作し、デプロイを終え問題なくWEB上で動いていたのですが、ある日を境にWEBアプリのディスプレイが部分的に左寄りになってしまいました。調べるとbootstrap-vueのcssが読みこまれなくなっていたので、それが原因だと考えています。また、実装環境と開発環境で同じエラーが出ていたので、サーバー側に問題はないかと思っています。
発生している問題・エラー
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
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP" rel="stylesheet">
{% block extra_head %}{% endblock %}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/vue-star-rating@1.7.0/dist/VueStarRating.umd.min.js"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<script src="https://cdn.rawgit.com/SSENSE/vue-carousel/6823411d/dist/vue-carousel.min.js"></script>
</head>
chromeのディベロッパーのネットワークを確認すると３０２が出ていました。
自分なりに調べたのですが、解決策が分かりませんでした。
お詳しい方がお見えになりましたら、ご助力いただけると幸いです。
至らない点が多々あるかと思いますがよろしくお願いします。
0
