How to include CSS dependencies in a new React component and Storybook

Sharetribe Go Community Edition
1

Problem

So I am using Storybook to develop a new React component. My component depends on the external component react-slick, which comes with its own styles and with two .css libraries.

My problem is that when I add those two custom CSS files, they are not imported correctly:

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

I am sure it is not file-not-found error, because if I change the name to slick1.css, then webpack simply crashes and tells me - file not found.

Also, if I just use CDN and add those files to client/.storybook/head.html then it works.

<!-- client/.storybook/head.html -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

So my questions are:

  1. Is it worth it importing those CSS libraries inside CarouselEdit.css or should I just use CDN?
  2. If yes, how can I do that?

##Code Structure

Inside /client/app/components/composites I have created:

/CarouselEdit.css
/CarouselEdit.js
/CarouselEdit.story.js

I start the storybook server using:
foreman start -f Procfile.hot

I have also included the component in storybook/config.js

 require('../app/components/composites/CarouselEdit/CaourselEdit.story.js');