webpackでcss-loaderが読み込まれないエラーの対処法

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のバージョンが悪さをしているとのこと。ということでバージョンを確認してみる。

css-loader

今のバージョンは6.2.0だが、2つ下げてみてもエラーが治らなかったので3つ下げてみた。

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のバージョンを3つも下げないといけなかった。

他にブログでもバージョンに言及しているものがなかったので手こずった。

webpackとloaderはバージョン関係が大事

エラー文を読んだだけではバージョンが原因だとは推測できない。提供者には最新バージョンでもうまく行くように修正してほしいものだ。

style-loaderの方を読み込んでもうまくcssが反映されなかったので、一度最初からやり直してみることにする。udemyなどの情報は割と古いからドキュメントで自力でやった方が割とすんなりいけると思った。

参考文献

css-loader | webpack

css-loader

nodeパッケージのダウングレード – Qiita

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です