React.js Error:You may need an appropriate loader to handle this file type

This post is also available in: 日本語 (Japanese)

When using the React.js, webpack, error occured when I try to import a CSS file.
You should use the appropriate loader as the error says "You may need an unloader to handle this file type."


This error appears to be a jsx file when you start using React.js, but you can solve it by installing the appropriate loader and define webpack.config.js if you are using webpack.

Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

Install the appropriate loader

The following is an example of using thecss file.
style-loader,css-loader installed with npm command.
If error occur in the jsx file, you must install the babel-loader, using the npm command.

npm install --save style-loader css-loader

Edit the settings file (webpack.config.js)

And define loaders by editing the configuration file (webpack.config.js in the example below).

var path = require('path');
var webpack = require('webpack');


module.exports = {
    entry: './www/src/sample/app.jsx',
    output: {
        path: './www/sample/dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
           {
             test: /\.(js|jsx)$/,
             loader: 'babel',
             exclude: /node_modules/,
             query: {
               presets: ["es2015", "react"],
             }
           },
           {
             test: /\.css$/,
             loaders: ['style', 'css?modules'],
           }
        ]
    }
}