CSSエラーメッセージについて

前提・実現したいこと

複数ページの構成で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";

何卒よろしくお願いいたします。

itagagaki

2021/09/20 14:53 編集

エラーメッセージは room.css についてのエラーですが、destyle.css についてのエラーは出ていないのですか？ <link rel="stylesheet" href="./css/room.css"> を <link rel="stylesheet" type="text/css" href="./css/room.css"> にしてもダメですか？（HTML5になっていると思うのでtype指定は要らないとは思いますが、一応）「develop Tool」とは何ですか？場合によっては、そのツールの設定が必要な可能性もあります。（ファイルの拡張子 .css をMIMEタイプ test/css に関連付ける設定）あと、これは関係ないですが、日本語の文書なら <html lang="en"> ではなく <html lang="ja"> のほうがいいと思います。

free_teku

2021/09/20 15:04

destyle.cssのエラーもありましたがそれは解決したので消しました。 typeを書いても変わりませんでした。 Google 　ディベロップツールです。ツールを使うとエラーが出ます。因みに、jsonの設定を変更する必要の問題ではないですか？

free_teku

2021/09/20 15:06

推測ですが、コンパイルができていないことが原因かもしれません。 style.scss→style.cssをコンパイルできていません。 style.scss上でsuccessはしますが、CSSにstyle.cssファイルが作成されません

itagagaki

2021/09/20 15:50

style.cssファイルが無いのならMIMEタイプのエラーではなくnot found的なエラーが出そうなものですが… ともかく、無いファイルを読み込もうとしてうまくいくはずがないので、「原因かも」も何もないです。それを解決してください。

m.ts10806

2021/09/20 21:16

HTML5、CSS3だけの話ですか？環境、フレームワークなど詳細提示されたほうが良いかと思います。 import指定しているファイルに拡張子がないのはどういう意図ですか？

maisumakun

2021/09/20 23:54

「http://127.0.0.1:5501」とありますが、このサーバはどのように立ち上げたものでしょうか？

free_teku

2021/09/21 00:05

@itagakiさん、かしこまりました！ご回答ありがとうございますm(_ _)m

free_teku

2021/09/21 00:07

@maisumakun さん、ご回答ありがとうございます！サーバーには、落としてません。ローカル環境での制作段階です。 go liveを使うといつもそのようになります。

m.ts10806

2021/09/21 00:14

環境、フレームワークなど詳細提示されたほうが良いかと思います。 import指定しているファイルに拡張子がないのはどういう意図ですか？

free_teku

2021/09/21 14:24 編集

m.ts10806さん、環境やフレームワークについて、が分からず、調べてからお伝えいたします。推測ベースで上記に添付しましたがよろしいでしょうか？上記にstyle.scssと書いていましたが非表示になっています。修正しstyle-scssと書き直しても、非表示です。修正しました。確認いただけると幸いです。

Lhankor_Mhy

2021/09/22 05:12

Live Server ですよね？ CSSファイルが見つからずに404ページ（MIMEタイプはtext/html）を読んでいるだけのように思えます。 https://github.com/ritwickdey/vscode-live-server/issues/197

free_teku

2021/09/22 06:41

おっしゃる通りだと考えています。ですが、 style.scssがコンパイルし、CSSにstyle.cssが反映されません。初めは、room.scssをroom.cssにしていましたがうまくいかないため style.cssに戻しました。が、結論上記のエラーが表示されたままです。

Lhankor_Mhy

2021/09/22 06:57

おそらく、パスが間違っているんだと思います。

Lhankor_Mhy

2021/09/22 07:04

エラーメッセージを再度ご提示願います。

Lhankor_Mhy

2021/09/22 07:43 編集

質問の編集を拝読。同じエラーメッセージを提示されたということは、style.cssに戻しても一字一句変わりがない、ということでいいですか？そうであるならば、何かの勘違いでしょう。

free_teku

2021/09/22 07:56 編集

そうですね。同じエラーになりますが、エラーは一つ減ります。エラーは下記のみになります＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Refused to apply style from 'http://127.0.0.1:5501/Room/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ room以外もstyle.scssでインポートすると同じ名前で設定しているためか HP(index.html)にも適用されて、cssが変更（崩れました）になりました。 Scssの名前を同一は避けたほうがいいように感じました。もしくは、json設定で何か変更すれば同一名.scssでも適用できるのでしょうか？

Lhankor_Mhy

2021/09/22 07:57

なんで全然関係ない room.css のエラーメッセージを質問に追記したんです？このやり取り、無駄じゃないですかね？

Lhankor_Mhy

2021/09/22 08:02

まあ、とにかく、たぶん、パスが間違っていますよ。いろいろ変えて試してみてください。現在提示されている情報からは、私から言えるのはそれだけですね。

free_teku

2021/09/22 08:02

申し訳ありません。この質問のエラーも含めて HPのliリンクの2ページ目（room.html)のエラーの話です。伝わりにくく申し訳ありません。 HPの制作は今回の件では関係ありません。複数あるliタグのリンクのroom　pageのCSSをScssを使って、制作していきたいんです。伝わりますでしょうか？

Lhankor_Mhy

2021/09/22 08:04

はい、伝わってますよ。パスの問題だと思います。