Webpack css-loader not building

Question

I am having difficulty in getting CSS loading using css-loader on my JSX files. I was following the example from:

https://christianalfoni.github.io/react-webpack-cookbook/Loading-CSS.html

This is my JSX

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './styles.css';
class Hello extends React.Component {
  render() {
    return <div>Hello world!</div>
  }
}

var el = document.getElementById('content')
var data = JSON.parse(el.getAttribute('data-attr'))
ReactDOM.render(<Hello data={data} />, el);`

This is my package.json

  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "css-loader": "^0.23.1",
    "exports-loader": "~0.6.2",
    "expose-loader": "~0.6.0",
    "grunt": "^0.4.5",
    "grunt-babel": "^6.0.0",
    "grunt-cli": "^0.1.13",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-webpack": "^1.0.11",
    "history": "^1.17.0",
    "imports-loader": "~0.6.3",
    "jquery": "^2.1.4",
    "lodash": "~3.0.0",
    "react": "^0.14.5",
    "react-dom": "^0.14.5",
    "react-router": "^1.0.3",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "chunk-manifest-webpack-plugin": "0.0.1",
    "grunt-react": "^0.12.3"
  }

This is my Webpack.config.js

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

var config = module.exports = {
  // the base path which will be used to resolve entry points
  context: __dirname,
  // the main entry point for our application's frontend JS
  entry: './app/frontend/javascripts/entry.js',
  stats: {
        // Configure the console output
        colors: true,
        modules: true,
        reasons: true
    },
  progress: true,
  keepalive: true,
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
        query: { presets: ['es2015', 'react'] }
      },
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  },
  output: {
    // this is our app/assets/javascripts directory, which is part of the Sprockets pipeline
    path: path.join(__dirname, 'app', 'assets', 'javascripts'),
    // the filename of the compiled bundle, e.g. app/assets/javascripts/bundle.js
    filename: 'bundle.js',
    // if the webpack code-splitting feature is enabled, this is the path it'll use to download bundles
    publicPath: '/assets',
    devtoolModuleFilenameTemplate: '[resourcePath]',
    devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]',
  },
  resolve: {
    // tell webpack which extensions to auto search when it resolves modules. With this,
    // you'll be able to do `require('./utils')` instead of `require('./utils.js')`
    extensions: ['', '.js'],
    // by default, webpack will search in `web_modules` and `node_modules`. Because we're using
    // Bower, we want it to look in there too
    modulesDirectories: [ 'node_modules', 'bower_components' ],
  },

  plugins: [
    // we need this plugin to teach webpack how to find module entry points for bower files,
    // as these may not have a package.json file
    new webpack.ResolverPlugin([
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('.bower.json', ['main'])
    ]),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
    //new webpack.optimize.CommonsChunkPlugin('common-bundle.js'),
    //new webpack.optimize.CommonsChunkPlugin('public-bundle.js')
  ]
};

This is my styles.css

#div {
 background-color: red;
}

The output I get from running my grunt task to run 'webpack' attached: You can see where it says the build failed for the CSS.

       cjs require fbjs/lib/mapObject [154] ./~/react/lib/ReactDOMFactories.js 18:16-45
 [157] ./~/react/lib/onlyChild.js 1.21 kB {0} [built]
       cjs require ./onlyChild [153] ./~/react/lib/ReactIsomorphic.js 24:16-38
 [158] ./~/react/lib/deprecated.js 1.77 kB {0} [built]
       cjs require ./deprecated [3] ./~/react/lib/React.js 19:17-40
 [159] ./~/react-dom/index.js 63 bytes {0} [built]
       cjs require react-dom [0] ./app/frontend/javascripts/entry.js 11:16-36

ERROR in ./app/frontend/javascripts/styles.css
Module parse failed: /Users/Booboo/Projects/Xeon/app/frontend/javascripts/styles.css Line 1: Unexpected token {
You may need an appropriate loader to handle this file type.
| div {
|  background-color: red;
| }
 @ ./app/frontend/javascripts/entry.js 5:0-23
Warning: Task "webpack:dev" failed. Use --force to continue.

Aborted due to warnings.
Booboo$ grunt react && grunt webpack && grunt watch

Answer 1

When you say

import styles from './styles.css';

you're trying to import a module that's not being exported as a module.

Try

import './styles.css';

instead to make it a simple file import.

Answer 2

I encounter this problem too. But in my case, I found my loader was written as

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

which should be correctly written as {test: /\.css$/, loader: 'style!css'}

note the '' around the /.css$/

I wise this would be helpful for you.