title: Trying to import my css file in react but it doesn't work
body: <p>I'm creating an app in react. Having webpack installed I'm trying to add some styling but it doesn't seem to work.</p>
  
  <p>My app.js:</p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import IndecisionApp from './components/IndecisionApp'
  import './styles/styles.css'
  
  ReactDOM.render(&lt;IndecisionApp /&gt;, document.getElementById('app'))
  
  </code></pre>
  
  <p>My webpack.config</p>
  
  <pre><code>{
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
  }
  </code></pre>
  
  <p>style.css file</p>
  
  <pre><code>* {
    color: red;
  }
  </code></pre>
  
  <p>app.js and styles folder are in the same folder. Shouldn't this work?</p>
  
  <p>Btw, I'm not getting any errors or anything.</p>
  
  <p>EDIT</p>
  
  <p>Error in terminal (new edit: fixed this error, but initial problem still not solved)</p>
  
  <pre><code>ERROR in ./src/styles/styles.css
  Module parse failed: C:\Users\Jossif\Desktop\Projects\react-course-projects\indecision-app\r-08-04-refactor\src\styles\styles.css Unexpected token (1:0)
  You may need an appropriate loader to handle this file type.
  | * {
  |   color: red;
  | }
   @ ./src/app.js 15:0-30
   @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/app.js
  </code></pre>
  
  <p>My webpack.config file </p>
  
  <pre><code>const path = require('path')
  
  module.exports = {
    entry: './src/app.js',
    output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          loader: 'babel-loader',
          test: /\.js$/,
          exclude: /node_modules/
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
      contentBase: path.join(__dirname, 'public')
    }
  }
  </code></pre>
  
  <p>My package.json file</p>
  
  <pre><code>{
    "name": "indecision-app",
    "version": "1.0.0",
    "main": "index.js",
    "author": "Andrew Mead",
    "license": "MIT",
    "scripts": {
      "serve": "live-server public/",
      "build": "webpack",
      "dev-server": "webpack-dev-server"
    },
    "dependencies": {
      "babel-cli": "6.24.1",
      "babel-core": "6.25.0",
      "babel-loader": "7.1.1",
      "babel-plugin-transform-class-properties": "6.24.1",
      "babel-preset-env": "1.5.2",
      "babel-preset-react": "6.24.1",
      "css-loader": "0.28.4",
      "live-server": "^1.2.0",
      "react": "15.6.1",
      "react-dom": "15.6.1",
      "react-modal": "2.2.2",
      "style-loader": "0.18.2",
      "validator": "8.0.0",
      "webpack": "3.1.0",
      "webpack-dev-server": "2.5.1"
    }
  }
  </code></pre>