Search code examples
reactjswebpackcss-modules

React-slick with css modules

I'm using webpack with css modules for my project and I've tried to install popular package react-slick to create slider. It works perfectly in sandbox, but in original project I have some difficulties. When I'm, trying to import slick.css and slick-theme.css as mentioned in documentation I got next error:

Module not found: Can't resolve '~slick-carousel/slick/slick-theme.css'

What I already tried to avoid this:

1

I installed

npm install file-loader url-loader --save

Updated my webpack.config.js by adding next section

  {
    test: /\.scss$/,
    loader:
      "style!css!sass?outputStyle=expanded&" +
      "includePaths[]=" +
      path.resolve(__dirname, "./node_modules")
  }

Didn't Work

2

Replaced

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

with

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

Didn't Work

3

I manually downloaded those two .css files in my project and import them directly from folder.

Didn't work.

What should I do to resolve this problem?

Solution

  • You need to install slick-carousel as well.
    react-slick is only the Javascript part of the library, slick-carousel is the css part.

    As per the DOCS:

    npm install slick-carousel
@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";

    Update
    These imports are inside a css file, notice the @ before the path.

    So for example you got a myStyles.css file and there you can import the slick-carousel styles.