Next.js 与 FortAwesome 和 s-s-r

Posted

技术标签:

【中文标题】Next.js 与 FortAwesome 和 s-s-r【英文标题】:Next.js with FortAwesome and s-s-r 【发布时间】:2019-12-27 19:30:56 【问题描述】:

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

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

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

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

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

但是,我不确定这应该在哪个文件中完成,而且,当我尝试这个时,Next 会抱怨:

[错误]./node_modules/@fortawesome/fontawesome-svg-core/styles.css 1:8 模块解析失败:意外令牌 (1:8) 您可能需要一个 合适的加载器来处理这种文件类型,目前没有加载器 配置为处理此文件

我看过CSS plugin,但这似乎也是一个红鲱鱼。

如何让这个包中的字体很棒的图标在服务器上使用 Next.js 设置样式?

【问题讨论】:

【参考方案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 />

【讨论】:

终于,我们自己有了一个可以接受的答案——谢谢先生! 请注意,这不适用于开发服务器,但可以在生产环境中使用。只是因此而浪费了一些时间。 谢谢,点击文档链接对我有用。对于配置博客,我使用了类似:***.com/a/57679291/2700718(在下面共享)。【参考方案2】:

肯定有几种方法可以解决这个问题。我通过将我需要的图标直接导入我的 React 应用程序在我的项目中解决了这个问题。所以客户端没有 Font Awesome 库,只有渲染的 SVG。

import  FontAwesomeIcon  from '@fortawesome/react-fontawesome'
import  faAdobe  from '@fortawesome/free-brands-svg-icons/faAdobe'

...

return ( 
  <FontAwesomeIcon icon=faAdobe />
)

Font Awesome 还提供了讨论其他方法的页面:server-side-rendering

【讨论】:

【参考方案3】:

我将把这个作为答案,因为这是一种方式,但是我觉得那里有更好的解决方案,所以我不会接受这个。

我创建了一个static/css 文件夹,然后复制了问题中引用的css文件

cp node_modules/@fortawesome/fontawesome-svg-core/styles.css static/css/fortawesome.css

然后在 _document.js 我通过link 标签加载文件:

<link
    rel="stylesheet"
    type="text/css"
    href="/static/css/fortawesome.css"
/>

我认为这是权宜之计。一个问题显然是,当底层库更新时,我需要手动复制最新版本的 css 文件。

【讨论】:

【参考方案4】:

我遇到了同样的问题,并通过手动将 Font Awesome 的 CSS 插入到我知道会正确获得 s-s-r 的样式中来修复它。

我使用styled-components,它很容易通过 Next.js s-s-r 进行设置,我是这样做的:

import  createGlobalStyle  from "styled-components";
import  config, dom  from "@fortawesome/fontawesome-svg-core";

// Prevent FA from adding the CSS
// (not that it was doing it in the first place but might as well)
config.autoAddCss = false;

// Add the FA CSS as part of Global Styles
const GlobalStyles = createGlobalStyle`
    $dom.css()
`;

【讨论】:

【参考方案5】:

这是我迄今为止尝试在我的项目中解决此问题的方法:

    安装@zeit/next-css、@zeit/next-sass [我也需要 sass。] 安装 fontawesome 包和导入 CSS

@zeit 软件包的安装

安装所需的包:

npm i --save @zeit/next-css
npm i --save @zeit/next-less
npm i --save @zeit/next-sass

然后更新next.config.js 文件,如下所示,它将支持 CSS 导入,从而解决加载时加载正确样式的问题:

const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const withSass = require("@zeit/next-sass");
module.exports = withLess(withCSS(withSass(
    webpack(config, options) 
        config.module.rules.push(
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: 
                loader: 'url-loader',
                options: 
                    limit: 100000
                
            
        );
        return config
    
)));

安装 fontawesome 包并导入 CSS

安装所需的包:

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome

然后您可以在您的页面中使用以下代码扩展位于pages 目录下的React.Component

import  FontAwesomeIcon  from '@fortawesome/react-fontawesome';
import  library  from '@fortawesome/fontawesome-svg-core';
import  fas  from '@fortawesome/free-solid-svg-icons'
import '@fortawesome/fontawesome-svg-core/styles.css';
library.add(fas);

那么这就是你可以使用字体的方式:

<FontAwesomeIcon icon=["fas", "user-tie"] />

我可能错了。

【讨论】:

以上是关于Next.js 与 FortAwesome 和 s-s-r的主要内容,如果未能解决你的问题,请参考以下文章

如何将 firebase 的 firestore/admin sdk 与 next.js 一起使用

构建与本地开发的 Next.JS 问题

我必须在 Next.js 项目中使用 express 吗?

如何实现redux-toolkit和next,js又不丢s-s-r

React-tooltip 和 Next.js s-s-r 问题

Next Js 自定义路由和 s-s-r