Webpack css-loader没有建立

这是我的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')
  ]
};

#div {
 background-color: red;
}

       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