I am trying to add styles to my project with Webpack. I added style-loader and css-loader to my dev dependencies. Webpack config file looks like this:
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: __dirname + '/app/index.js',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
include: /app/,
use: ['style-loader','css-loader']
}
]
},
output: {
filename: 'transformed.js',
path: __dirname + '/build'
},
plugins: [HTMLWebpackPluginConfig]
};
My file structure looks like this: 
To index.js file I am trying to add css with:
var React = require('react');
var ReactDom = require('react-dom');
var App = require('./components/App');
var css = require('styles.css');
if(typeof window !== 'undefined') {
ReactDom.render(
<App />,
document.getElementById("app")
);
}
I also tried version with:
import styles from 'styles.css'
It always returns the same error message:
ERROR in ./app/index.js
Module not found: Error: Can't resolve 'styles.css' in '/Users/zolotova/GitHub/to_do_list/app'
@ ./app/index.js 4:10-31
Child html-webpack-plugin for "index.html":
1 asset
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html 551 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]```
Thank you for any help! I was browsing for solutions, but nothing seems to solve this issue.