javascript - Webpack css-loader not building -

i having difficulty in getting css loading using css-loader on jsx files. following example from:

https://christianalfoni.github.io/react-webpack-cookbook/loading-css.html

this jsx

import react 'react';  import reactdom 'react-dom';  import styles './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 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 webpack.config.js

var path = require('path');  var webpack = require('webpack');    var config = module.exports = {    // base path used resolve entry points    context: __dirname,    // main entry point our application's frontend js    entry: './app/frontend/javascripts/entry.js',    stats: {          // configure 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' legal name reference          query: { presets: ['es2015', 'react'] }        },        { test: /\.css$/, loader: "style-loader!css-loader" }      ]    },    output: {      // our app/assets/javascripts directory, part of sprockets pipeline      path: path.join(__dirname, 'app', 'assets', 'javascripts'),      // filename of compiled bundle, e.g. app/assets/javascripts/bundle.js      filename: 'bundle.js',      // if webpack code-splitting feature enabled, path it'll use download bundles      publicpath: '/assets',      devtoolmodulefilenametemplate: '[resourcepath]',      devtoolfallbackmodulefilenametemplate: '[resourcepath]?[hash]',    },    resolve: {      // tell webpack extensions auto search when resolves modules. this,      // you'll able `require('./utils')` instead of `require('./utils.js')`      extensions: ['', '.js'],      // default, webpack search in `web_modules` , `node_modules`. because we're using      // bower, want in there      modulesdirectories: [ 'node_modules', 'bower_components' ],    },      plugins: [      // need plugin teach webpack how find module entry points bower files,      // these may not have 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 styles.css

#div {   background-color: red;  }

the output running grunt task run 'webpack' attached: can see says build failed 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 {  may need appropriate loader handle file type.  | div {  |  background-color: red;  | }   @ ./app/frontend/javascripts/entry.js 5:0-23  warning: task "webpack:dev" failed. use --force continue.    aborted due warnings.  booboo$ grunt react && grunt webpack && grunt watch

when

import styles './styles.css'; 

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

try

import './styles.css'; 

instead make simple file import.