title: Babel Compile CSS files
body: <p>I'm trying to configure a ReactJS application, using Express as back-end server. I'm facing an issue with .css files, when I run 'npm start' I'm getting this error.</p>
  
  <pre><code>/client/app.css Unexpected token (1:0)
  You may need an appropriate loader to handle this file type.
  | .layoutHeader {
  |   background: #00AAFA;}
  </code></pre>
  
  <p>This is my application configuration.</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code> "scripts": {
  
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "NODE_ENV=development node_modules/.bin/babel-node --presets 'react,es2015' server/server.js"
    },
    "dependencies": {
  
  
      "body-parser": "^1.17.1",
      "ejs": "^2.5.6",
      "express": "^4.15.2",
      "moment": "^2.18.1",
      "mongoose": "^4.9.6",
      "react": "^15.5.4",
      "react-bootstrap": "^0.30.10",
      "react-dom": "^15.5.4",
      "react-router": "^2.4.0",
      "react-router-redux": "^4.0.8",
      "redux": "^3.6.0",
      "request": "^2.81.0"
    },
    "devDependencies": {
  
  
      "babel-cli": "^6.24.1",
      "babel-core": "^6.24.1",
      "babel-loader": "^7.0.0",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "css-loader": "^0.28.0",
      "nodemon": "^1.11.0",
      "react-hot-loader": "^1.3.1",
      "style-loader": "^0.16.1",
      "webpack": "^2.4.1",
      "webpack-dev-middleware": "^1.10.2",
      "webpack-hot-middleware": "^2.18.0"
    }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>module.exports = {
  
      devtool: "",
      entry: [
          'webpack-hot-middleware/client',
          path.join(path.resolve(__dirname), 'client', 'client.js')
      ],
      output: {
          path: path.join(path.resolve(__dirname), 'public', 'js'),
          filename: 'bundle.js',
          publicPath: '/js/'
      },
      module: {
          loaders: [
          {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
              cacheDirectory: 'babel_cache',
            presets: debug ? ['es2015', 'react'] :  ['react', 'es2015']
          }
          }
        {
          test: /\.css$/,
          exclude: /node_modules/,
          loader: 'style-loader!css-loader',
        }, {
          test: /\.css$/,
          include: /node_modules/,
          loaders: ['style-loader', 'css-loader'],
        }     
          ]
      },
  }
  </code></pre>
  
  <p>And I didn't configure anything in .babelrc file.</p>
  
  <p>I wanted to write individual CSS for every component and that can be imported to only that component.</p>
  
  <p>I think I missed some configuration with babel, please help me to configure this application.</p>
  
  <p>Thanks in advance.</p>