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

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

[szegheo]

It’s working for me using

• slick-carousel 1.8.1
• webpack 5.64.4 (using Asset Modules to export files instead file-loader)
• sass 1.32.13
• sass-loader 12.3.0

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

• be sure that the path value assigned to the variable has a trailing slash
• play with resolve.roots option of Webpack and try to set it to your project root (where your node_modules folder is) as an absolute path
• also check out the resolve.modules option of Webpack
• in case if your Webpack config is using the resolve-url-loader package that can also lead to this issue because it can overwrite the default module resolution logic of Webpack

[mariogmz]

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.