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'], } ] } }