Webpack doesn't load libraries styles

`I am using webpack with a React project, and the external npm packages that I install don't get their styles loaded (e.g react-slick). It looks clearly that the styles are not loading and going into the DOM.

This is my webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");

module.exports = {
  mode: "development",
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
        REACT_APP_API_URL: JSON.stringify(process.env.REACT_APP_API_URL),
      },
    }),
  ],
  devServer: {
    historyApiFallback: true,
  },
  externals: {
    // global app config object
    config: JSON.stringify({
      apiUrl: "http://localhost:3000",
    }),
  },
};

I tried to add different loaders in the config like: css-loader, style-loader and babel-loader`

The react-slick library doesn't come with styles built-in. As the documentation says, you should install its styles with the slick-carousel package (or write your own).

I just had to remove the tilde symbol(~) before the style imports:

import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

I hadn't changed anything in the provided webpack configuration, and the styles were loaded as expected.

Full example that I used:

import React from "react";
import { createRoot } from "react-dom/client"
import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

const root = createRoot(document.getElementById("app"));

const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };

const SimpleSlider = () => {
    return (
        <div>
          <h2> Single Item</h2>
          <Slider {...settings}>
            <div>
              <h3>1</h3>
            </div>
            <div>
              <h3>2</h3>
            </div>
          </Slider>
        </div>
      );
}

root.render(<SimpleSlider />);