【React + Webpack】You may need an appropriate loader to handle this file type 解決方法

React + Webpack の環境で You may need an appropriate loader to handle this file type の解決方法メモ。

エラー

ビルドすると以下のエラーが発生。

ERROR in ./src/index.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. See https://webpack.js.org/concepts#loaders
> body {
|   margin: 0;
|   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 @ ./src/index.tsx 15:0-21

webpack 5.70.0 compiled with 1 error in 7589 ms

原因

Webpack がCSSを読み込めなくてエラーが発生。

対処方法

npm install --save-dev css-loader style-loader

• css-loader：Webpack がCSSをJavascriptに変換するloder
• style-loader：CSSをページに反映させるためのloder

1
2
3
4
5
6
7
8

module.exports = {
  mode: 'production',
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
};

これでCSSの読み込みと反映が出来るようになってエラーが解決します。

参考

The issue for ‘You may need an appropriate loader to handle this file type.’ · Issue #8 · shama/letswritecode