Importing slick carousel theme css throws errors on webpack build

Question

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']
    })
})

Answer 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.

Answer 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.

Answer 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.