Шрифты не найдены: React-slick + nextjs - PullRequest
Новая
       20

Шрифты не найдены: React-slick + nextjs

0 голосов
/ 23 января 2020

Я пытаюсь использовать act-slick внутри Next Js проекта. Карусель работает нормально, но у меня есть некоторые проблемы при импорте шрифтов, используемых в файлах css.

Я попробовал следующее:

npm install slick-carousel

и импортировал css в компоненте, где используется модульact-slick: 

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

При запуске приложения в сетевом журнале появляется следующая ошибка:

404 Not found на обоих slick.woff и slick.ttf

Я нашел несколько других ответов, в которых они добавили следующее в файл 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
  },
})))

Я пробовал как с, так и с без модуля withFonts.

Если я добавлю прямые URL-адреса в <Head>, он будет работать: 

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

Но вместо этого заставит работать шрифты.

Кто-нибудь с предложением загрузить шрифты в Next js?

Ответы [ 2 ]

0 голосов
/ 24 января 2020

Вставка обоих файлов в каталог publi c со следующим установленным шрифтом должна устранить ошибку 404

0 голосов
/ 24 января 2020

Не решение, но я решил это по-другому.

Поскольку я собираюсь стилизовать большинство вещей, требующих шрифтов, я решил просто скопировать css из slick-carousel и удалить все ссылки на шрифты. Переопределите стрелку влево, стрелку вправо и точки.

Не решение вышеуказанной проблемы, но решение моей проблемы.

...