投稿2021/09/20 13:45
編集2021/09/22 07:08複数ページの構成で2ページ目を作成段階でdevelop Toolにエラーが表示されました。
エラーメッセージを和訳し、MIMEタイプのため、CSSがロードしませんという記事を読みましたが理解ができませんでした。
教えていただけると幸いです。
###環境、フレームワーク
環境とフレームワークは以下です。
開発環境・・ローカル環境
ツールはVscode。
HPで使用しているフレームワークはaos,flatpickrです。
Refused to apply style from 'http://127.0.0.1:5501/Room/css/room.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to apply style from 'http://127.0.0.1:5501/Room/css/room.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>石井花壇|温海温泉旅館【公式サイト】</title> 8 <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。"> 9 <link rel="stylesheet" href="./css/destyle.css"> 10 <link rel="stylesheet" href="./css/style.css"> 11</head> 12<body> 13 <header class="header"> 14 <div class="header-flex"> 15 <img src="../Room/img/sub-header-logo.png" alt="" id="logo"> 16 <nav class="nav"> 17 <ul class="header-list"> 18 <li class="header-item"> <a href="room.html">お部屋</a></li><!-- /.header-item --> 19 <li class="header-item"> <a href="menu.html">お料理</a></li><!-- /.header-item --> 20 <li class="header-item"> <a href="onsen.html">温泉</a></li><!-- /.header-item --> 21 </ul><!-- /.header-list --> 22 </nav><!-- /.nav --> 23 <div class="header-link"> 24 <p>宿泊予約</p> 25 </div><!-- /.header-link --> 26 </div><!-- /.header-flex --> 27 </header><!-- /.header --> 28 29 <main class="main"> 30 <section class="fv"> 31 <div class="fv-img"> 32 <p>お部屋</p> 33 </div><!-- /.fv-img --> 34 35 </section><!-- /.fv --> 36 <section class="room"> 37 <div class="bread inner"> 38 <ol class="breadcrumbs"> 39 <li class="bread-item"> <a href="index.html"></a> </li><!-- /.bread-item --> 40 <li class="bread-item"> <a href="room.html"></a> </li><!-- /.bread-item --> 41 </ol><!-- /.breadcrumbs --> 42 </div><!-- /.bread --> 43 <div class="message"> 44 創業より受け継がれてきた石井花壇の和の造り <br> 温海の雄大な絶景を堪能していただけるように設計された客室 <br> ゆるやかに流れ行く時間に身を委ねて 45 </div><!-- /.message --> 46 <section class="room-contents"> 47 <ul class="room-list"> 48 <li class="room-item"> 49 <img src="../Room/img/oheya01.jpg" alt="お部屋1"> 50 <div class="jp-text"> 51 <p class="ttl">温泉付き客室</p><!-- /.ttl --> 52 <p>温海の源泉かけ流し露天風呂付き客室になります。<br> あなただけの上質な安らぎのひとときを。</p> 53 <p>＊部屋数に限りがございます。<br> ＊洗い場はないため、お体を先に大浴場でお流しになって頂く必要があります。</p> 54 </div><!-- /.jp-text --> 55 </li><!-- /.room-item --> 56 <li class="room-item"> 57 <img src="../Room/img/oheya02.jpg" alt="お部屋2"> 58 <div class="jp-text"> 59 <p class="ttl">庭園付き客室</p><!-- /.ttl --> 60 <p>庭園付きの客室になります。<br> お庭を見ながら、ほっとするひとときをお過ごしください。</p> 61 <p>＊お庭は複数のお客様と囲む形になります。<br> ＊部屋数に限りがあります。<br> ＊ご希望の方は「お抹茶/500円」をルームサービスさせていただきます。</p> 62 </div><!-- /.jp-text --> 63 </li><!-- /.room-item --> 64 <li class="room-item"> 65 <img src="../Room/img/oheya03.jpg" alt="お部屋3"> 66 <div class="jp-text"> 67 <p class="ttl">一般客室</p><!-- /.ttl --> 68 <p>最もベーシックな客室になります。 伝統の中にモダンさを取り入れた <br> 内装となっており、とても過ごしやすくしていただけます。</p> 69 <p>＊全室お部屋より日本海を望むことができます。</p> 70 </div><!-- /.jp-text --> 71 </li><!-- /.room-item --> 72 </ul><!-- /.room-list --> 73 74 </section><!-- /.room-contents --> 75 </section><!-- /.room --> 76 77 </main><!-- /.main --> 78省略 79 </body> 80 </html>
MIMEタイプ
調べましたが、理解ができませんでした。
→MIMEタイプを調べ、自身のSCSS→CSSコンパイル設定を確認し、style.cssではないといけないと判断し
変更しましたが、結論、変わりませんでした。
画像
こちらの画像のような構成です。
json
1{ 2 //IDやクラス名が閉じタグの後ろにコメントとして自動挿入 3"emmet.syntaxProfiles": { 4 "html": { 5 "filters": "html,c" 6 } 7}, 8"emmet.preferences": { 9 "filter.commentAfter": "<!-- /[#ID][.CLASS] -->" 10}, 11 12 "liveSassCompile.settings.formats": [ 13 14 //Sassの出力内容の設定 15 { 16 "format": "expanded", //nested、compact、compressedのどれかを選ぶ 17 "extensionName": ".css", //style.cssとして出力 18 "savePath": "/css" //cssフォルダの中にstyle.cssを出力 19 } 20 ], 21 "liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定 22 "**/node_modules/**", 23 ".vscode/**", 24 ".history/**" 25 ], 26 "liveSassCompile.settings.autoprefix": [ //ベンダープレフィックスの指定 27 "last 2 versions", 28 "ie >= 11", 29 "Android >= 4", 30 "ios_saf >= 8" 31 ], 32 "workbench.colorTheme": "Quiet Light", 33 "liveServer.settings.donotShowInfoMsg": true 34 35 }
style
1@import "./Room/Scss/foundation/base"; 2@import "./Room/Scss/foundation/general"; 3@import "./Room/Scss/foundation/mixin"; 4@import "./Room/Scss/layout/header"; 5@import "./Room/Scss/layout/footer";
何卒よろしくお願いいたします。
回答1件
0
自己解決
解決できました。
jsonの設定を変更する必要がありました
お手数おかけしました
解決策： "savePath": "/css"→ "savePath": "~/../css"
投稿2021/09/22 08:15
総合スコア103
あなたの回答
tips
プレビュー
Q&A
