React-redux error when install webpack css-loader

Trying to use css-loader with react-redux and drop me some errors when put module in webpack.config.js (code):

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};
module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/i,
            use: {loader:"css-loader"},
          },
        ],
      },
    };

or , i tryred:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
 module: {
        rules: [
          {
            test: /\.css$/i,
            use: {loader:"css-loader"}
          }
        ]
      },
};

With the same result error :

Module parse failed: Unexpected token (32:6)
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
|   render() {
|     return (
>       <Provider store={store}>
|         <AlertProvider template={AlertTemplate} {...alertOptions}>
|           <Router>
 @ ./leadmanager/frontend/src/index.js 1:0-35

webpack 5.53.0 compiled with 1 error in 204 ms

and React-Redux file:

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

import { Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';

import Header from './layout/Header';
import Dashboard from './leads/Dashboard';
import Alerts from './layout/Alerts';
import Login from './accounts/Login';
import Register from './accounts/Register';
import PrivateRoute from './common/PrivateRoute';

import { Provider } from 'react-redux';
import store from '../store';
import { loadUser } from '../actions/auth';

// Alert Options
const alertOptions = {
  timeout: 3000,
  position: 'top center',
};

class App extends Component {
  componentDidMount() {
    store.dispatch(loadUser());
  }

  render() {
    return (
      <Provider store={store}>
        <AlertProvider template={AlertTemplate} {...alertOptions}>
          <Router>
            <Fragment>
              <Header />
              <Alerts />
              <div className="container">
                <Switch>
                  <PrivateRoute exact path="/" component={Dashboard} />
                  <Route exact path="/register" component={Register} />
                  <Route exact path="/login" component={Login} />
                </Switch>
              </div>
            </Fragment>
          </Router>
        </AlertProvider>
      </Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

I really do not understand why this happen ,and I wonder if I anyone can explain me how to resolve this error or how webpack css-loader influence Redux object .Thx!!