webpack keeps showing an error in css-loader saying build failed

Question

All I am doing is just loading a simple css file into html file that's it, however I get no idea what the error even is. Here is my webpack.config.js file

const path  = require('path');

const config = {
  entry: "./index.js",

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },

  module: {
    rules: [{
      test: /\.css$/,
      use: [
        'css-loader',
        'style-loader'
      ]
    }]
  },

  mode: "development",

  devServer: {
    contentBase: path.resolve(__dirname),
    port: 9090,
    compress: true
  }
}

module.exports = config;

But it keeps saying this error even after checking everything millions of times.

The below is my project structure where is use this.

JSExperiments
|-- dist
|-- index.html
|-- index.js
|-- node_modules
|-- package-lock.json
|-- package.json
|-- style.css
`-- webpack.config.js

2 directories, 6 files

And I have used import './style.css' inside my index.js.

Here is my devDependencies

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^2.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev": "^1.1.1",
    "webpack-dev-server": "^3.1.14"
  }

Thanks for the help.