react-slick: Import CSS from slick-carousel fails

Question

React beginner here. My app uses create-react-app, and I'm pulling in react-slick for a carousel. I'm trying to follow the directions that are provided in the setup for react-slick, but the following doesn't work for me:

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

I get the following error:

./src/components/Homepage.scss Module not found: Can't resolve '~slick-carousel/slick/slick.css' in '/Users/simon/Dev/frischideas/site-new/src/components'

It works if I add the css to index.html from the CDN, but I'd rather avoid that network call, as I believe it's affecting the rendering of the page on initial load.

I tried following the instructions for configuring create-react-app to use relative paths, but that wasn't working for me either. Maybe I'm completely misunderstanding, but I thought the ~ notation would allow me to import scss from a package in /node_modules.

Any suggestions/clarification would be greatly appreciated.

Update: adding the setup from my webpack.config file (most of which is the default from create-react-app).

{
            test: /\.scss$/,
            use: [
              require.resolve('classnames-loader'),
              require.resolve('style-loader'), {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: 1,
                  localIdentName: "[name]__[local]___[hash:base64:5]"  
                },
              },{
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 6 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway,'
                      ],
                      remove: false,
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },{
                loader: require.resolve('sass-loader'),
                options: {
                  outputStyle: 'expanded'
                }
              }
            ],
          }

Repercussion

This appears to be in relation webpack configuration you may want to scroll from bottom up to find a solution there, essentially I'd check whether webpack is allowed to handle .scss files via resolve part of the configuration – Hydride

Thank you - I've updated my post with what's currently in webpack.config - I it's already set up to handle .scss files. – Repercussion

One other thing - I'm also importing susy and normalize into my main styles.scss without any problem; it's only when I import slick-themes.css and slick.css that I have a problem. – Repercussion

Sorry if this is bothering, I have released a react carousel slider component these days, install it by npm install react-carousel-slider, don't need to import other things else, with default css style but still endeavors to provide flexibility for customizing css , maybe you could have a try : ) – Mcquiston

Answer 1

I was struggling with this issue and I finally find the solution:

1. just go inside of your node_modules folder and find slick-carousel folder
2. inside of that find slick.scss and slick-theme.scss from slick folder and open them up
3. create two seperate files with names of _slick.scss and _slickTheme.scss inside of your style folders of your project
4. copy all from slick.scss and slick-theme.scss and put them in your newly created files ( _slick.scss and _slickTheme.scss )
5. import them in your app.scssfile
6. now if you are using webpack like me, I'm guessing that you getting can't resolve './ajax-loader.gif' error and can't resolve font error after that
7. in fact those files is been used by slick-carousel css it self and for that we can just simple go inside your newly created _slickTheme.scss and find these lines

/* Slider */

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

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

8. comment them out

Matson

Answer 2

you change to be this :

import "slick-carousel/slick/slick.css";

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

delete ~

Backsword

Thanks mate, this worked. However what does '~' in the import statement mean? – Vaginismus

~ it means to root folder, i think it works only if you installed the module globally. I'm really not sure of what i am saying though, it's only an assumption – Curious

Answer 3

you might have missed this:

npm install slick-carousel

Doddering

Fiddestick! That was exactly my case for this issue. I didn't realize that I had install reack-slick twice while focusing on documentation instructions. Some distractions... (= – Radiobiology

Thanks! I completely forgot to install it. Helped a lot – Antimonous

Thanks, I've been stuck and this saved me. – Piggyback

Answer 4

You Also need to install slick-carousel for CSS and fonts. That's the trick here. Cheers...

First, install slick-carousel

 npm install slick-carousel --save

If you are using yarn, you can use

 yarn add slick-carousel

Then import CSS files in your App.js file.

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

Forge

Answer 5

You need to have appropriate loaders. Use style-loader in combination with css-loader for the CSS. Use file-loader and url-loader in order to load the fonts and images linked within CSS files.

(Here are configuration settings for the file-loader)

So at the end, your webpack.config.js should contain something like this:

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        "@babel/preset-env",
                        "@babel/preset-react"
                    ].map(require.resolve)
                }
            }
        },
        {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"}
            ]
        },
        {
            test: /\.(png|jpg|gif)$/i,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 8192
                    }
                }
            ]
        },
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/'
                }
            }]
        }
    ]
},

After that, you can simply import styles into your application entry point (e.g. /src/index.js):

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

Labialize

It worked for me. Thanks :) Upvote @Mališa Stanojević – Costanza

Answer 6

It fails because you are importing css modules in your app, and styles from slick are not applied because they are getting cached. I've fixed it in my project like below:

In your style.scss files put this

:global {
    @import 'node_modules/slick-carousel/slick/slick';
}

Crape

it will be app.scss in your case I bet – Crape

Answer 7

You are missed installing a slick carousel. try this code

npm install slick-carousel

Click here for more Details

Coinsurance

Answer 8

you need to install react-slick CSS files without ~ sign like this:

import "slick-carousel/slick/slick.css";

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

and you need to import them also in the component that is showing your slick slider

for example, if you have a **slider component ** that is going to be used in Home component, you need to import slick CSS files in Home too. it worked for me.

and if you are changing direction to rtl, you need to use ltr for slider

and check slick-carousel to be installed

Mayfield

Answer 9

To import styles, make sure that you have installed slick-carousel first:

npm install slick-carousel --save

then:

import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";

Note: But be aware slick-carousel has a peer-dependancy on jQuery which you, or your colleagues may not like to see in your console output, so you can always grab the CSS from there and convert it into any CSS in JS solution that you might be using.

This information was taken from react-slick documentation page.

Hiltonhilum