This post is also available in: English-US (英語)
React.js,webpackを使っていて、CSSファイルをインポートしようと際に出たエラーです。
「You may need an appropriate loader to handle this file type」というエラー内容の通り、適切なloaderを使ってくださいという事みたいです。
このエラーは、React.jsを使い始めた際に jsx ファイルで発生するケースが多いようですが、適切な loader をインストールして、 webpackを使っている場合には webpack.config.js にて定義することで解決できます。
Unexpected token (1:0) You may need an appropriate loader to handle this file type.
適切なloaderをインストール
以下は、cssファイルを使いたい場合の例です。
jsx ファイル関連でエラーが出る場合には、babel-loader などを npm コマンドを使ってインストールする必要があります。
style-loader css-loader を npm コマンドでインストールします。
npm install --save style-loader css-loader
設定ファイル(以下の例では webpack.config.js)を編集する
そして、 設定ファイル(以下の例では webpack.config.js)を編集して、loadersを定義します。
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'],
}
]
}
}








