Why is webpack throwing this error?

Question

webpack

Installed modules: babel/loader, babel core, style-loader, css-loader
Gives the following error in the console:

ERROR in ./src/index.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .container {
|   color: green;
| }
 @ ./src/App.jsx 2:0-21
 @ ./src/index.js

Webpack.config.js:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js",
  },

  module: {
    rules: [
      {
        test: /.jsx?/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react"],
          },
        },
      },
      {
        test: /\.css$/,
        include: [__dirname + "/src"],
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
};

index.css:

.container {
  color: green;
}

index.js:

import * as React from "react";
import { render } from "react-dom";
import { App } from "./App.jsx";

render(<App />, document.querySelector("#app"));

App.jsx:

import * as React from "react";
import "./index.css";

export function App() {
  return <div className="container">Test</div>;
}