Shin_Code 
webpackにてcss-loaderをインストールはしたが、その後に以下のコマンドを打つとエラーが吐かれる。
npx webpack —mode developmentエラー内容は次の通り。
ERROR in ./src/modules/my.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this
file.備忘録として解決法を残しておく。
webpackでcss-loaderが読み込まれないエラーの対処法
css-loaderをインストールして新しくcssを追加。そしてindex.jsにて
import "./modules/my.css";
を追加した。さらにwebpack.config.jsにて以下のコードを追加。
const path = require("path");
module.export = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "main.js",
},
module: {
rules: [{ test: /\\.css/, use: "css-loader" }],
},
};
moduleの部分を追加した。だが
npx webpack —mode development
としても次にエラーが吐かれる。
ERROR in ./src/modules/my.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this
file.
my.cssにてエラーが出ている。日本語役すると
モジュールの解析に失敗しました。予期しないトークン (1:5) このファイルタイプを処理するには、適切なローダーが必要になるかもしれません。 ファイルを処理するように設定されていません。
適切なローダーということでpackage.jsonを確認してみる。
"devDependencies": {
"css-loader": "^6.2.0",
"webpack": "^5.52.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {}
css-loaderはきちんと最新版がインストールされていた。何が原因だろう。
いろいろ調べてみたところcss-loaderのバージョンが悪さをしているとのこと。ということでバージョンを確認してみる。
今のバージョンは6.2.0だが、２つ下げてみてもエラーが治らなかったので３つ下げてみた。
npm install --save-dev css-loader@3.4.2
最終的には以下のようなpackage.jsonの状態になった。
"devDependencies": {
"css-loader": "^3.4.2", <<ここのバージョンを下げた
"webpack": "5.52.1",
"webpack-cli": "^4.8.0"
},
"dependencies": {}
これで実行したら無事webpackが通った。
なぜ自力で解決できなかったのか
ドキュメント通りにやったが、バージョンに言及する記述がなかったので解決に時間がかかった。最終的にはUdemyのQ＆Aからバージョン周辺の知識をしり、css-loaderのバージョンを３つも下げないといけなかった。
他にブログでもバージョンに言及しているものがなかったので手こずった。
webpackとloaderはバージョン関係が大事
エラー文を読んだだけではバージョンが原因だとは推測できない。提供者には最新バージョンでもうまく行くように修正してほしいものだ。
style-loaderの方を読み込んでもうまくcssが反映されなかったので、一度最初からやり直してみることにする。udemyなどの情報は割と古いからドキュメントで自力でやった方が割とすんなりいけると思った。
