كيفية إضافة محمل لملفات css في webpack؟

كنت أحاول استخدام react-datetime-range-picker وعندما أقوم باستيراده أحصل على خطأ. لقد جربت حلا آخر لكن لم ينجح.

javascript modules 6.14 KiB 
./src/pages/Campaign/CampaignNew.js 2.39 KiB [built] 
./node_modules/react-datetime-range-picker/dist/style.css 3.75 KiB [built] [1 error] 
ERROR in ./node_modules/react-datetime-range-picker/dist/style.css 5:0 
Module parse failed: Unexpected token (5: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   
|  */ 
|  
> .rdt {
|   position: relative; 
| }  
@ ./node_modules/react-datetime-range-picker/dist/index.js 27:0-22  
@ ./src/pages/Campaign/CampaignNew.js 3:0-62 
@ ./src/App.js 6:0-55 16:46-57  
@ ./src/index.js 1:0-24 

لقد تحققت من موقع webpack.config.js ويبدو أنه لا يوجد مشكلة في الكود. لقد قمت بتثبيت محمل css , محمل css
 

webpack.config.js

const path = require("path");
const webpack = require("webpack");
require('dotenv').config({path: './.env'});

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/app_chat/js"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.(sass|scss|css)$/,
        exclude: /node_modules/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env),
    }),
  ],
};

package.json

{
  "name": "app_chat",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "axios": "^1.2.4",
    "babel-loader": "^9.1.2",
    "dotenv": "^16.0.3",
    "react": "^18.2.0",
    "react-datetime": "^3.2.0",
    "react-datetime-range-picker": "^3.0.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.7.0",
    "react-switch": "^7.0.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "devDependencies": {
    "css-loader": "^6.7.3",
    "style-loader": "^3.3.1"
  }
}

ما حل المشكلة؟