Error:You may need an appropriate loader to handle this file type -> when trying to add css styling

added a few npm packages to my package.json:

simple-line-icons.css

vendor.bundle.base.css

react-bootstrap-table2.min.css

materialdesignicons.css

rc-slider/assets/index.css

and then running npm install gives this error for each of those:

ERROR in ../node_modules/rc-slider/assets/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
> .rc-slider {
|   position: relative;
|   height: 14px;
 @ ./src/App.tsx 19:0-36
 @ ./src/index.tsx 3:0-24 8:30-33

ERROR in ../node_modules/react-bootstrap-table-next/dist/react-bootstrap-table2.min.css 1:0
Module parse failed: Unexpected token (1:0)

And this is my webpack config:

module.exports = {
  entry: './src/index.tsx',
  mode: 'development',
  output: {
    filename: 'bundle.[fullhash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  resolve: {
    modules: [__dirname, 'src', 'node_modules'],
    extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
  },
  module: {
    rules: [
      {
        test: /.(js|ts)x?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.(png|svg|jpg|gif)$/,
        exclude: /node_modules/,
        use: ['file-loader'],
      },
    ],
  },
};