CSS - You may need an appropriate loader to handle this file type

Question

In my App.jsx file I am importing a css file like this: import './App.css';

I have the following code in my webpack.config.js.

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

var BUILD_DIR = path.resolve(__dirname, 'src/build');
var APP_DIR = path.resolve(__dirname, 'src/app');

var config = {
  entry: APP_DIR + '/App.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    loaders : [
    {
      test: /\.scss$/,
      include : APP_DIR,
      loaders : ["style", "css", "sass"]
    },
    {
      test : /\.jsx?/,
      include : APP_DIR,
      loader : 'babel'
    }
   ]
  }
};

module.exports = config;

Since I have a loader for css, everything seems alright.

However, I am getting:

ERROR in ./src/app/App.css
Module parse failed: /path/to/file/App.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)

Answer 1

You only have a scss loader setup so once its hitting a css file it doesn't know how to parse.

{ test: /\.css$/, loader: "style-loader!css-loader" }

should get you up and going.

Edit:

Also if you are using scss why not just change App.css to App.scss that way your css type is consistent and don't have to include the css loader. I would say that is the best solution.

Answer 2

In addition to finalfreq's answer, the up-to-date way of doing this is no longer to separate loaders with a !, and to instead include them as an array with use:

{
  test: /\.css$/,
  use: [
    "style-loader",
    "css-loader"
  ]
}