Webpack config with css loader

Question

I have been using this webpack config for loading babel and css loaders, but getting error. My webpack config works very well, if I use only babel loader, but css loader isn't working.

var path = require('path');

var config = {
   entry: './main.js',

   output: {
      path : path.join(__dirname, './'),
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         },
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'style-loader!css-loader',
         }
      ]
   }
}

module.exports = config;

The error I am getting while running webpack is

ERROR in ./~/css-loader!./main.js 

Error screenshot

Answer 1

You need to configure the CSS loaders for imports matching .css not .jsx. Right now you're passing a JavaScript file to the css-loader, which isn't valid CSS, so it fails. The correct loader configuration is:

module: {
    loaders: [
      {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['es2015', 'react']
          }
      },
      {
          test: /\.css$/,
          loader: 'style-loader!css-loader',
      }
    ]
}

Answer 2

You need style loader in your webpack config:

Example from one of my projects:

var ExtractTextPlugin = require("extract-text-webpack-plugin");
...
module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css")
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css!sass")
            },
        ],
    },
...