Ошибка сборки модуля (из ./node_modules/css-loader/dist/cjs.js): CssSyntaxError

Я создаю приложение для реагирования, и я импортировал слайдер в файл

а потом у меня есть css-загрузчик, я тоже использую webpack

вот мой слайдер -

import React, {useState} from 'react';
import RubberSlider from '@shwilliam/react-rubber-slider';
import styles from '@shwilliam/react-rubber-slider/dist/styles.css';

export const Slider = () => {
  const [value, setValue] = useState(0.5)

  return <RubberSlider width={250} value={value} onChange={setValue} />
}

этот ^ войдет в другой компонент и будет вызван

но все хорошо, когда я комментирую -

import styles from '@shwilliam/react-rubber-slider/dist/styles.css';

но мне нужны эти стили для слайдера, когда я запускаю команду webpack, я получаю эту ошибку -

ERROR in ./src/index.js (./node_modules/css-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./src/index.js)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) /Users/eddy/Projects/Sorting-Visualizer/src/index.js Unknown word

> 1 | import React from 'react';
    | ^
  2 | import ReactDOM from "react-dom";
  3 | import App from "./App.js";

вот мой файл webpack.config.js -

const path = require("path");
const config = {

    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    },

    resolve: { extensions: [".mjs", ".js", ".jsx", ".css"] },

    module: {
        rules: [
            {
                test: /\.js|jsx|.css$/,
                use: [  "style-loader", "css-loader", "babel-loader"],
                exclude: /node_modules/,
                // loader: "style-loader!css-loader"
            },

        ]
    },

}

module.exports = config;

Что я делаю неправильно? Спасибо!