How to fix Storybook Webpack error with CSS file

Question

I have a design system set up using Storybook.

The new issue I am having now is after trying to use react-responsive-carousel within my design system. I'm trying to import a (global) CSS file in .storybook/preview.js:

import '@whitelabel/components/node_modules/react-responsive-carousel/lib/styles/carousel.min.css'

I'm getting the following error:

ERROR in ../components/node_modules/react-responsive-carousel/lib/styles/carousel.min.css (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!../components/node_modules/react-responsive-carousel/lib/styles/carousel.min.css)
design-system: Module build failed (from ./node_modules/postcss-loader/src/index.js):
design-system: SyntaxError
design-system: (1:1) Unknown word
design-system: > 1 | var api = require("!../../../../../design-system/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");

My webpack configuration looks like this:

config.module.rules.push(
      {
        test: /\.(sa|sc)ss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: "[name]__[local]_[hash:base64:5]",
              },
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }
);

I just want to get this CSS file from the package imported without it being CSS "Modulified". It just needs to be imported globally.

Any ideas what I might be doing wrong to get the above error?