not able to add my css while using express and webpack

Hello I am having trouble adding my css files while building an app using react, node, express, and webpacks. I am not sure where the issue is.

My file directory is below with app.js in the same directory as the client folder. Bundle.js is working, but i am unable to use styles.css.

   client
       index.html
       -> app
          index.jsx
          -> css -> styles.css
          -> public -> bundle.js
   app.js

This is my webpacks.config.js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'client/public');
var APP_DIR = path.resolve(__dirname, 'client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: '/public/'

  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ],
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};

module.exports = config;

and here is my app.js express functions

const publicPath = express.static(path.join(__dirname, '/client/public'));
const cssPath = express.static(path.join(__dirname, 'client/app/css'));

app.use('/public', publicPath);
app.use('/css',cssPath);

and in my html i tried a variety of ways to link the styles.css. the bundle.js works and i am able to get stylesheets from online to work, but not styles.css locatted in my css folder.

 <link rel="stylesheet" src="css/styles.css" type="text/css"></link>

via Austen Novis