找不到字体：React-slick + nextjs答案

【问题标题】：Fonts not found: React-slick + nextjs找不到字体：React-slick + nextjs
【发布时间】：2020-05-10 04:08:01
【问题描述】：

我正在尝试在 NextJs 项目中使用 react-slick。轮播工作正常，但我在导入 css 文件中使用的字体时遇到了一些问题。

我尝试了以下方法：

npm install slick-carousel

并在使用 react-slick 模块的组件中导入 css：

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

当我运行应用程序时，我在网络日志中收到以下错误：

404 Not foundslick.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 模块。

如果我在<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>

但宁愿让字体工作。

有人建议在 Nextjs 中加载字体吗？

【问题讨论】：

标签： css reactjs fonts next.js react-slick

【解决方案1】：

不是解决方案，但我用另一种方式解决了。

因为我要为大多数需要字体的东西设置样式，所以我决定从 slick-carousel 复制 css 并删除所有字体引用。覆盖左箭头、右箭头以及点。

不是上述问题的解决方案，而是解决我的问题。

【讨论】：

【解决方案2】：

在安装了下一个字体的公共目录中粘贴两个文件应该可以解决 404 错误

【讨论】：