React-slick: why is the css invalid?

[codepandy]

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>

[akiran]

Are you using webpack ?

[codepandy]

yes

[codepandy]

can't the webpack be used?

[akiran]

Have you added config to handle css in webpack ?

Some thing like this
https://github.com/akiran/react-slick/blob/master/webpack.config.js#L22-L26

[codepandy]

@akiran
No,I didn't set the config,but I have added config to handle css in webpack,the demo's style is still invalid.
the below is my webpack.config.js

loaders: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}

        },
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        {
            test: /\.scss$/,
            loader: 'style!css!sass?outputStyle=expanded&' + 'includePaths[]=' +
            (path.resolve(__dirname, './node_modules'))
        }
    ]

[codepandy]

@akiran
I have installed the slick-carousel. how to use it?is it the component's style?

[codepandy]

@akiran
Could you help me to solve the problem?

[davidglbr]

Why have you commented out the lines

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

These are important. Once I added these it worked for me

[codepandy]

@davidglbr
if I added the code of css,there would be a lot of errors.

./~/slick-carousel/slick/ajax-loader.gif
Module parse failed: C:\myself\ReactjsDemos\slick_demonode_modules\slick-carousel\slickajax-loader.gif Unexpected character '' (1:7)
You may need an appropriate loader to handle this file type.

@ ./~/css-loader!./~/sass-loader?outputStyle=expanded&includePaths[]=C:/myself/ReactjsDemos/slick_demo/node_modules!./~/slick-carousel/slick/slick-theme.css 6:118-146
./~/slick-carousel/slick/fonts/slick.eot
Module parse failed: C:\myself\ReactjsDemos\slick_demonode_modules\slick-carousel\slick\fonts\slick.eot Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.

[codepandy]

@akiran @davidglbr
I installed file-loader and url-loader,the code can run,but its style still has some bug.
the nextButton and preButton can't be showed.

[codepandy]

I have solve the problem,The default color is white,so my style is different from the demo.sorry,it's my fault.

[frankolson]

@codepandy I am running into this same problem. What did the default color have to do with your solution?

[frankolson]

nevermind, I figured it out. I needed to install file-loader and url-loader in order for webpack to be able to read the font and image files

[SlowFamily]

@frankolson can you provide an example of how you used file-loader or url-loader to resolve this? I have them installed, but still getting errors like "Cannot resolve module 'fonts/slick.svg'"

[codepandy]

@frankolson
I created a .scss file, the below is the file's code.
`
@import "../node_modules/foundation-apps/scss/foundation.scss";
$primary-color: #00558B;

$slick-font-path: "/fonts/";
$slick-arrow-color: $primary-color;

@import "../node_modules/slick-carousel/slick/slick.scss";
@import "../node_modules/slick-carousel/slick/slick-theme.scss";
`

the $primary-color is the customized color.

[frankolson]

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

[RezikoChkadua]

i couldn't find webpack.config.js file in next.js project :( or should i try to find it in node_modules ?

[mhauens]

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