文章/答案/技术大牛

发布

社区首页 >问答首页 >找不到字体: React-slick + nextjs

问找不到字体: React-slick + nextjs
EN

Stack Overflow用户

提问于 2020-01-24 03:53:26

回答 2查看 3.3K关注 0票数 1

我正在尝试在NextJs项目中使用react-slick。carousel运行良好，但我在导入css文件中使用的字体时遇到了一些问题。

我尝试过以下几种方法：

npm install slick-carousel

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

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

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

slick.woff和slick.ttf上的404 Not found

我发现他们在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>中添加直接urls，它将起作用：

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

next.js

react-slick

css

reactjs

fonts

回答 2

Stack Overflow用户

发布于 2020-01-24 15:52:43

不是一个解决方案，但我用另一种方法解决了它。

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

不是上面提到的问题的解决方案，但解决了我的问题。

票数 1

Stack Overflow用户

发布于 2020-01-24 21:11:07

在安装了next字体的公共目录中粘贴这两个文件应该会解决404错误

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59886132

复制

相似问题

问找不到字体: React-slick + nextjs
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问找不到字体: React-slick + nextjsEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问找不到字体: React-slick + nextjs
EN