はじめに
とあるudemy(下記に記載)を進めていたところ、エラーが出たので共有します!
TODOアプリをjavascript, html, cssにて作成中です。
問題
JavaScriptファイル内でcssファイルをimportしようとしたらエラーが出た。
index.js
/* エラーコード
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.
*/
//エラーが出た箇所
import "./style.css";
なぜエラーがでた???
- サーバーを立てないとimport文が使えないらしい
解決方法
htmlファイルにlinkタグを使って直接cssを読み込んだ。
index.html
<!-- 周辺のコードも載せときました -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todojs</title>
<link rel="stylesheet" href="style.css"> <!-- この行 -->
</head>
余談
これからhtmlファイルに読みこもっと~~と思ったそこのあなたへ
importを使うといいことがあるらしい。
僕自身も知識がまだ足りないのでちゃんとしたことは言えないけど、JavaScriptファイルとそのファイルに関係したcssをセットで管理できるという利点があるらしい。
説明へたくそ、いつか書き直そうかな笑
おわりに
余談でも話したけど、エラーの解決方法がわかっても現状の何がだめなのかを把握することがさらに学習を深いものにしてくれるのかも。
参考