Q&A
html上で link rel=stylesheet src=～.css みたいに書いたらダメなの？
どうしても書きエラーが解決できないので、どなたかこのコンソールエラーの修正方法を教えてください。コンソールによると、style.css:1で起きているようです。
Windwos10のXamppで実行しています。
エラー文
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.
ファイル階層は以下の通りです。
Code & ファイル階層
/src index.js style.css index.html
html
1index.html 2 3<!DOCTYPE html> 4<html lang="ja"> 5<head> 6 <meta charset="UTF-8"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <title>Modern JS</title> 10</head> 11<body> 12 <div id="app"> 13 </div> 14 <script type="module" src="./src/index.js"></script> 15</body> 16</html> 17
JavaScript
1index.js 2 3import "./style.css"; 4 5document.getElementById("app").innerHTML = ` 6<h1>Hello Vanilla!</h1> 7<div> 8 We use the same configuration as Parcel to bundle this sandbox, you can find more 9 info about Parcel 10 <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>. 11</div> 12`;
CSS
1style.css 2 3body { 4 font-family: sans-serif; 5 }
試したこと
index.jsのimport "./style.css";を// import "./style.css";とコメントアウトすると正常に動きます。
英語でGoogleってもヒントが得られなかったので、こちらに質問しました。何卒宜しくお願い致します。
https://www.udemy.com/course/modern_javascipt_react_beginner/
小生はこちらで学んでおりまして、JSの素人です。講師のコードが上記になっていたので写経したまでです。
どなたか、```html上で link rel=stylesheet src=～.css```でも問題が無いか教えてくださると助かります。
回答2件
0
ベストアンサー
「CSS Modules」と呼ばれる手法と「CSS Module Scripts」と呼ばれるオープン規格があり、フレームワークなしでブラウザだけで使えるのは後者です。後者では import "./style.css" assert { type: 'css' }; と書く必要があり、Chrome/Edge でしか利用できません。
投稿2022/07/11 04:43
総合スコア20884
詳しい回答ありがとうございます。手元に今Macがないので試せませんが、Safariなどで読み込むとエラーになるということでしょうか？
その場合、どうしたらそのエラーを回避できますでしょうか？
素直にstyleタグをinnerHTMLなりappendChildなりで追加したほうが話が早いと思うけど
なるほど、そうなのですね。情報ありがとうございます。
CSS Moudle Scripts でやろうとするなら、Safri では動きませんのでこの方法は諦めてください。
もし何かの書籍やらコースやらを進めていて CSS Modules を使うことになっているのなら、その中で CSS Moduels を使えるようにする方法が説明されているはずです(単純にHTML/CSS/JSをサーバに置くだけでは動きません)。こっちの場合は Safari でも動くんじゃないかと思います。
はい。https://www.udemy.com/course/modern_javascipt_react_beginner/
こちらのコースを進めていています。CSS Moudle ScriptsはやはりSafariでは動作しないのですね。今のところそのような説明はないので、コースの講師に質問できるのでため、そちらで説明を受けてもみたいと思います。
Viteで作った環境で試したところ、CSS Modulesが使えて、import "./style.css";が使えるようになりました。理由はわかりません。わかる方いらしたら、教えてください。
0
海外のサイトですが、同様の問題とその解決策が記載されていました。
このページの内容では、解決しなかったということでしょうか。
投稿2022/07/11 04:32
総合スコア1005
あなたの回答
tips
プレビュー
