React-slick: slick-carousel css should be imported along with react-slick

[elad-maimon]

Hi,

I want to use _react-slick_ and according to the documentation I need to npm install it and then bring _slick-carousel_ with bower or CDN.

I have two issues regarding this:
1) There's no guaranty that the two packages are compatible. It's better to vendor dependencies like mentioned here:
https://medium.com/@Rich_Harris/how-to-not-break-the-internet-with-this-one-weird-trick-e3e2d57fee28#.q2vblosmq

2) Assuming I want to depend on the _slick-carousel_ dependency (which exists in your package.json) I still need to refer explicitly to the slick-carousel css file location, like this:

@import ~slick-carousel/slick/slick.css
@import ~slick-carousel/slick/slick-theme.css

It'd be nice if dist will have a bundle that's already includes the styles, so I can just do import Slide from 'react-slick' and it will come with the required css.

[akiran]

We don't want to do this because of maintenance problems.

[elad-maimon]

What do you mean by maintenance problems ?

I raised two issues, at least for the first one the solution is very simple - just vendor the original slick-carousel (aka. add it to the dist folder), and then I can import it safely from your module without version compatibilities concerns.

[pigflymoon]

Hi Elad,

So how did you solve this issue at last?
I tried import slick.scss and slick-theme.scss which is not successful.

@import ~slick-carousel/slick/slick.scss
@import ~slick-carousel/slick/slick-theme.scss

Thanks! @elad-maimon

[elad-maimon]

I didn't solve the issue, I'm just importing the style files, hoping that it keeps backward compatibility and the files stay there :)

I do the imports exactly as you wrote, it should work (I'm using slick-carousel@^1.6.0).
Is your sass loader includes node_modules in the search path?

[a-m-dev]

where do you guys even import those two files ???????????? in your jsx file ???? or in your sass file????
i really appreciate the work that is been done by creator but documentation realllllllly sucks , it just took couple of my hours with no result ...... , i cant even lunch the carousel yet .....

[josheche]

where do you guys even import those two files ???????????? in your jsx file ???? or in your sass file????
i really appreciate the work that is been done by creator but documentation realllllllly sucks , it just took couple of my hours with no result ...... , i cant even lunch the carousel yet .....

@a-m-dev You have to comment out the lines 24-40 in slick-theme.scss if you're using the scss file. If not, try looking for how the font and ajax loader paths are being rendered then comment that out. That usually gets the carousel working, albeit a terrible workaround.