CODEWITHSUNDEEP
webpacksassslick.js
Vishal Sharma
Vishal Sharma

Reputation: 2610

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

Upvotes: 13

Views: 15247

Answers (6)

Benji
Benji

Reputation: 310

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(?)

Upvotes: 0

lester-barahona
lester-barahona

Reputation: 46

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

Upvotes: 0

Vaiman Hunor
Vaiman Hunor

Reputation: 434

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

Upvotes: 0

Fabian von Ellerts
Fabian von Ellerts

Reputation: 5211

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.

Upvotes: 28

Roberto Alicata
Roberto Alicata

Reputation: 526

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.

Upvotes: 6

Rick
Rick

Reputation: 518

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.

Upvotes: 3

Related Questions