having trouble with css loader with webpack 2

I am getting this error after my webpack comiples my jsx file. I am importing 2 stylesheets into my jsx. But this is the error that appears on my browser window.

Module parse failed: C:\Users\pheon\Desktop\complete-intro-to-react\public\style.css Unexpected token (5:0) You may need an appropriate loader to handle this file type.

Any help will be greatly apprecuated!

My webpack config file is as follow:

const path = require('path'); module.exports = { context: __dirname, entry: './js/ClientApp.js', devtool: 'eval', output: { path: path.join(__dirname, '/public'), filename: 'bundle.js', publicPath: '/public/' }, devServer: { publicPath: '/public/', historyApiFallback: true }, resolve: { extensions: ['.js', '.json'] }, stats: { colors: true, reasons: true, chunks: true }, module: { rules: [ { enforce: 'pre', test: /\.js$/, loader: 'eslint-loader', exclude: /node_modules/ }, { test: /\.json$/, loader: 'json-loader' }, { include: path.resolve(__dirname, 'js'), test: /\.js$/, loader: 'babel-loader' }, { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { url: false } } ] } ] } }; 

style.css :

* { box-sizing: border-box;; } html { font-family: Helvetica Neue, Helvetica, sans-serif; } .app { position: relative; width: 100%; height: 100vh; background-image: url(/public/img/3.jpg); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: #333; } .app > h1 { color: white; } .landing { background-color: rgba(220, 220, 220, .7); padding: 15px 30px; border-radius: 5px; } .landing > h1 { color: #B10DC9; font-family: Skia; font-weight: normal; } .landing > input, .landing > form > input { width: 100%; padding: 10px; border-radius: 4px; } .landing > form { width: 100%; min-width: 300px; } .landing > a { margin-top: 15px; padding: 10px 40px; background-color: #333; color: #fafafa; border-color: transparent; display: inline-block; text-decoration: none; border-radius: 4px; } .landing > a:hover, .landing > a:focus { background-color: #666; } .landing > a:active { background-color: #fafafa; color: #333; border-color: #333; } .details, .search { position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; overflow-y: scroll; background-color: rgba(220, 220, 220, .8); padding: 15px 30px; border-radius: 5px; } pre { text-align: left; } .search > div > a { width: 30%; height: 0; padding-bottom: 19.8%; overflow: hidden; margin-bottom: 3%; border: 2px solid #333; border-radius: 4px; color: #333; text-decoration: none; } .search > div > a { width: 100%; padding-bottom: 70%; height: 0; overflow: inherit; margin-bottom: inherit;; border: none; border-radius: inherit; } .show-card { float: left; margin-right: 2%; border: 2px solid #333; border-radius: 4px; text-align: left; width: 32%; height: 0; padding-bottom: 19.8%; overflow: hidden; margin-bottom: 2%; } .show-card:nth-child(3n), .search > div > a:nth-child(3n) > .show-card { margin-right: 0; } .show-card > img { width: 46%; float: left; } .show-card > div{ display: block; float: right; width: 52%; overflow-y: scroll; } .show-card > div > h3 { margin-top: 0; margin-bottom: 5px; } .show-card > div > h4 { margin-top: 0; margin-bottom: 5px; color: #666; font-size: 13px; } .show-card > div > p { margin: 0; font-size: 13px; } .search > header + div { margin-top: 25px; } header { z-index: 10; position: fixed; display: flex; align-items: center; justify-content: space-between; text-align: center; top: 0; left: 0; width: 100%; overflow: hidden; background-color: #fafafa; padding: 8px 30px; } header > h1 { font-family: Skia; font-weight: normal; color: #B10DC9; margin: 0; } header > h1 > a { color: #B10DC9; text-decoration: none; } header > h2 { font-weight: normal; margin: 0; } header > h2 > a { color: #aaa; text-decoration: none; } .details > div { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; } .details > div > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } header > input { min-width: 250px; max-width: 350px; width: 33%; padding: 4px; border: 2px solid #ccc; border-radius: 4px; } .details > section > img, .details > section > h3 { width: 8%; } .details > section > img[alt] { -webkit-animation: spin 4s infinite linear; -moz-animation: spin 4s infinite linear; animation: spin 4s infinite linear; } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } .details > section > * { margin: 0 1%; } .details > section { display: flex; justify-content: space-around; align-items: center; margin-bottom: 25px; } .details > header + section { margin-top: 25px; }