CODEWITHSUNDEEP
cssreactjswebpack
Jay P.
Jay P.

Reputation: 2590

In react-slick, className doesn't match with class names in CSS files converted by webpack css-loader

I'm very new to react-slick. I've followed the installation instruction, but the slider doesn't come with CSS styles. My React project was created by create-react-app.

slick.css and slick-theme.css are imported styles.scss which is a file that I made to import the slick CSS files. As you see my css-loader set up in webpack.config.js, class names are supposed to be changed following localIdentName.

Because of that, the class names are converted in CSS, and my class names in HTML stay the same. Therefore, they don't match. How can I match them?

webpack.config.dev.js

test: /\.(css|scss)$/,
  use: [
    require.resolve("style-loader"),
    {
      loader: require.resolve("css-loader"),
      options: {
        importLoaders: 1,
        modules: true,
        localIdentName: "[path][name]__[local]--[hash:base64:5]",
        camelCase: "dashes"
      }
    },
    ...

styles.scss

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

Upvotes: 0

Views: 1614

Answers (1)

Gautam Naik
Gautam Naik

Reputation: 9368

In your style.scss files put this

:global {
    @import 'node_modules/slick-carousel/slick/slick';
}

Adding :global will prevent css modules from renaming them

Upvotes: 1

Related Questions