react-slick: why is the css invalid?

I installed the react-slick and slick-carousel. the below is my part code:

import React from ‘react’; import ReactDOM from ‘react-dom’; import Slider from ‘react-slick’; // import ‘slick-carousel/slick/slick.css’ // import ‘slick-carousel/slick/slick-theme.css’

const slideConfig = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }

<Slider {...slideConfig}> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div> </Slider>

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 9
Comments: 18 (2 by maintainers)

Most upvoted comments

@SlowFamily sure:

First I installed file-loader and url-loader:

npm install file-loader url-loader --save

Then in my webpack.config.js file I configured it like so:

module.exports = {
  module: {
    rules: [
      ...
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
      }
    ],
  },
};

That should take care of all the font files and gifs, plus some image files.

+35

frankolson on May 25, 2017

i couldn’t find webpack.config.js file in next.js project 😦 or should i try to find it in node_modules ?

you need next.config.js in your root.

add this to your next.config.js

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withSass({
    webpack (config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000,
                    name: '[name].[ext]',
                }
            }
        })
        return config
    }
}))

if you use less you can replace withSass with const withLess = require('@zeit/next-less')

also install

npm i -S url-loader

mhauens on Jul 29, 2019