'Importing slick carousel theme css throws errors on webpack build

I'm trying to import slick-theme.scss in my parent scss as

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

but during bundle, I get errors on the files imported in slick-theme.scss. Here's the error log

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./sass/app.scss
    Module not found: Error: Can't resolve './ajax-loader.gif' in '/Users/Vishal/Documents/Work/nf-core/sass'
     @ ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./sass/app.scss 6:89679-89707

I tried adding resolve-url-loader as well to the webpack configuration, but that doesn't help.

Here's my webpack scss loader section

loaders: commonConfig.module.loaders.concat({
    test: /\.s?css$/,
    exclude: /(node_modules)/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'postcss-loader', 'sass-loader']
    })
})

Solution 1:^[1]

The solution by Roberto Alicata works, but can be achieved easier and without an additional file. Just add these two variables before importing slick:

$slick-font-path: "~slick-carousel/slick/fonts/";
$slick-loader-path: "~slick-carousel/slick/";

@import '~slick-carousel/slick/slick', '~slick-carousel/slick/slick-theme';

The other variables don't cause problems and the !default flag is used to define a default value to be overwritten, not to overwrite it.

Solution 2:^[2]

create a file .scss (i.e. fix-slick.scss ) and write:

$slick-font-path: "~slick-carousel/slick/fonts/" !default;
$slick-font-family: "slick" !default;
$slick-loader-path: "~slick-carousel/slick/" !default;
$slick-arrow-color: black !default;

now, import this file from your main scss file.

Solution 3:^[3]

CSS loaders will also return resources referenced with @import 'other.css' or background-image: url("/images/loader.gif") back to the webpack module tree.

"Can't resolve './ajax-loader.gif'" sounds like there are issues with resolving the path to the gif.
I don't think it should start with a .
CSS loaders usually expect paths to start with a character (filename), / for absolute and ~ for non-relative paths (webpack feature). Is this an error in slick-theme.scss?

It would also be useful to add the file-loader or url-loader to handle gif/png/jpg files.
Mainly to take them out of node_modules into your dist/release folder.

Solution 4:^[4]

Increasing the the limit to 4180 in webpack.config.js did the trick to me.

Solution 5:^[5]

The solution of Fabian von Ellerts is correct, but in my case I needed to change the path.

$slick-font-path: "~slick-slider/slick/fonts/";
$slick-loader-path: "~slick-slider/slick/";

Note: I'm using Storybook

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Fabian von Ellerts
Solution 2	Roberto Alicata
Solution 3	Rick
Solution 4	Vaiman Hunor
Solution 5	lester-barahona

'Importing slick carousel theme css throws errors on webpack build

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]