javascript - Next.js 与 FortAwesome 和 SSR

Question

我正在构建一个 Next.js应用程序并寻找与其 SSR 范例一起工作的图标包。

在尝试了几个库之后，我现在正在使用 FortAwesome/react-fontawesome ，这看起来很有希望。

问题是当页面加载时图标很大(无样式)，然后突然它们的样式正确了。我正在尝试弄清楚如何让这些设置为服务器端样式。

我见过人talk about导入 FortAwesome 提供的样式表:

import '@fortawesome/fontawesome-svg-core/styles.css';

但是，我不确定应该在哪个文件中完成此操作，而且，当我尝试此操作时，Next 会提示:

[ error ] ./node_modules/@fortawesome/fontawesome-svg-core/styles.css 1:8 Module parse failed: Unexpected token (1:8) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

我看过 CSS plugin , 但这也似乎是一个转移注意力的问题。

如何使用 Next.js 在服务器上设置此包中的超赞字体图标样式？

Answer 1

React-fontawesome 添加了一个部分，介绍如何让 FontAwesome 与 Next.js 一起工作。

https://github.com/FortAwesome/react-fontawesome#nextjs

在你的元素中创建一个./pages/_app.js文件

import React from 'react'
import App, { Container } from 'next/app'
 
import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css' // Import the CSS
config.autoAddCss = false // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
 
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return <Component {...pageProps} />
  }
}
 
export default MyApp

或者使用函数组件:

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css' // Import the CSS
config.autoAddCss = false // Tell Font Awesome to skip adding the CSS automatically since it's being imported above

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}