search

kenwheeler / slick

the last carousel you'll ever need
kenwheeler.github.io/slick
MIT License
28.34k stars 5.88k forks source link

[webpack | slick-carousel] Webpack cannot find properly path for slick files #3783

Open 42savage opened 5 years ago

42savage commented 5 years ago

Hello guys, I started to using a webpack bundler, and i got a little issue with slick slider. Slick fonts and gif doesn't load properly

screenshot of error It looks like webpack skips main folder, where my project is, and looking for files in d:/node_modules instead of d:/main_folder/node_modules I was trying to fix this by creating slick-fix.scss and set font and loader path but i doesn't work properly slick-fix.scss $slick-loader-path: "/node_modules/slick-carousel/slick/" !default; $slick-font-path: "/node_modules/slick-carousel/slick/fonts/" !default;

main.scss imports @import "slick-fix"; @import "~slick-carousel/slick/slick.scss"; @import "~slick-carousel/slick/slick-theme.scss";

main.js require('./styles/main.scss'); require('jquery'); import 'slick-carousel/slick/slick'; $('.slider').slick();

webpack.config.js is on jsfiddle, because of better readability. I hope that ill got any respond, thanks in advance

rubendinho commented 5 years ago

Any updates?

42savage commented 5 years ago

I skipped this issue by using slick cdn. I mean in slick-theme.scss i just changed local path to cdn path and it helped. Someone advised me that i should use a webpack server and this error should occur but i didn't even try this method.

ahmadalfy commented 5 years ago

Would check and update you. Are you sure you’re using the proper loaders for the image and the fonts?

mariogmz commented 4 years ago

This is happening to me too.

mariogmz commented 4 years ago

I'm using laravel mix as a webpack wrapper, I needed to copy both fonts and loader image to my project's assets and then use my own asset URLs in the slick sass variables.

szegheo commented 2 years ago

It's working for me using

both of these ways:

$slick-loader-path: "~slick-carousel/slick/";
$slick-font-path: "~slick-carousel/slick/fonts/";
@import "~slick-carousel/slick/slick";
@import "~slick-carousel/slick/slick-theme";
$slick-loader-path: "/node_modules/slick-carousel/slick/";
$slick-font-path: "/node_modules/slick-carousel/slick/fonts/";
@import "slick-carousel/slick/slick";
@import "slick-carousel/slick/slick-theme";

...so I think this issue is related to Webpack configuration, not Slick.

If you run into this issue, I recommend you to