Unable to style react component using webpack

So I am trying to add some css style to my react components but failed. My webpack.config.js looks like:

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

var BUILD_DIR = path.resolve(__dirname, './build');
var APP_DIR = path.resolve(__dirname, './src/client');

const config = {
   entry: {
     main: APP_DIR + '/index.js'
   },
   output: {
     filename: 'bundle.js',
     path: BUILD_DIR,
   },
   module: {
    rules: [
     {
       test: /\.css$/,
       use: [{
           loader: "style-loader"
       }, {
           loader: "css-loader?modules=true&camelCase=true"
       }]
     },
     {
       test: /\.(jsx|js)?$/,
       use: [{
         loader: "babel-loader",
         options: {
           cacheDirectory: true,
           presets: ['@babel/preset-react']
         }
       }]
     }
    ],

  }
};

module.exports = config;

My client code folder looks like:

Client
--style
----index.css
--index.js

index.css looks like:

body{
    color: #555;
    background: #f85032;
    margin: 10px 30px;
}

Inside index.js, I am loading the css file using

import css from './style/index.css';

Then I do:

npx webpack
npm start

There's no error message in console output. The webpage shows up but there's no css style. Can someone please help me with this? Thanks!

It appears that if I do some inline css in index.html then it works? Any suggestion why this happens? Thanks!