我正在尝试使用react-slick里面 NextJs元素。轮播工作正常，但我在导入 css 文件中使用的字体时遇到一些问题。
我尝试过以下方法:
npm install slick-carousel
并在使用react-slick模块的组件中导入css:
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模块。
如果我在 <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 中加载字体有什么建议吗？
最佳答案
不是一个解决方案，但我用另一种方式解决了它。
由于我要设计大部分需要字体的内容，我决定从 slick-carousel 复制 css 并删除所有字体引用。覆盖向左箭头、向右箭头以及点。
不是上述问题的解决方案，但可以解决我的问题。
关于css - 找不到字体 : React-slick + nextjs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59886132/