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

Petitioner

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.

Carlsen

This is the correct answer. I also had to add .gif and font loaders to my webpack config. – Longevous

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.

Basanite

this is returning http://localhost:8081/~slick-carousel/slick/ajax-loader.gif 404 (Not Found) my main.scss @import "_fix-slick"; @import "~slick-carousel/slick/slick.scss"; @import "~slick-carousel/slick/slick-theme.scss"; – Dawnedawson

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.

Sacks

Yes, its an error in slick-theme.scss. And, i already have url-loader etc defined in my webpack config – Petitioner

@slam You can have your own version of slick-theme.scss in your project and edit it. – Invective

@slam To our luck slick uses variables to define those paths, if you import the SASS file you can fix the error with two variables. See my answer. – Carlsen

Answer 4

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

Hellas

Answer 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

Anastos

Answer 6

I was having this problem on a NextJS site. I found that removing the following CSS from the slick-theme.min.css file worked:

.slick-loading .slick-list{background:url(ajax-loader.gif) center center no-repeat #fff}

@font-face {
    font-family: slick;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/slick.eot);
    src: url(fonts/slick.eot?#iefix) format("embedded-opentype"),
      url(fonts/slick.woff) format("woff"),
      url(fonts/slick.ttf) format("truetype"),
      url(fonts/slick.svg#slick) format("svg");
  }

I don't know where people are getting the fonts file from(?)

Lunna