2

I am trying to use react-slick inside a NextJs project. The carousel works fine but I have some problems importing the fonts used in the css files.

I have tried the following:

npm install slick-carousel

and imported the css in the component where the react-slick module is used:

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

When i run the application I get the following error in the network log:

404 Not found on both slick.woff and slick.ttf

I found some other responses where they have added the following to the next.config.js:

const withSass = require('@zeit/next-sass')
const withFonts = require('next-fonts');
const withCss = require('@zeit/next-css')

module.exports = withFonts(withSass(withCss({
  env: {
    environment: 'development'
  },
  enableSvg: true,
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  },
  cssLoaderOptions: {
    url: false
  },
})))

I've tried both with and without the withFonts module.

If i add the direct urls in the <Head>it will work:

 <Head>
        <>
          <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
          <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
        </>
 </Head>

But will rather get the fonts to work instead.

Anyone with some suggestion to get the fonts to load in Nextjs?

Ørjan
  • 2,749
  • 2
  • 16
  • 24

2 Answers2

3

Not a solution, but I solved it another way.

As I am going to style most of the stuff that requires fonts, i decided to just copy the css from slick-carousel and delete all font references. Override arrow left, arrow right as well as the dots.

Not a solution on the problem stated above but fix my issue.

Ørjan
  • 2,749
  • 2
  • 16
  • 24
1

Pasting both files in public directory with next font installed should resolve 404 error

Nikas
  • 247
  • 1
  • 6