Next.js avec Frowesome et SSR

Question

Je construis une application A NEXT.JS Application et recherchez un package d'icônes qui fonctionne avec son paradigme SSR.

Après avoir essayé quelques libs, je travaille maintenant avec Frawesome/React-Fontawesome , qui semble prometteur.

Le problème est que lorsque la page charge les icônes est grande (non plantée), puis soudain, elles sont censées correctement. J'essaie de comprendre comment obtenir ce type de serveur de style.

J'ai vu les gens parler de Importation d'une feuille de style fournie par Frowesome:

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

Cependant, je ne suis pas sûr quel (s) dossier (s) que cela devrait être fait dans et aussi, suivant se plaint lorsque j'essaie ceci:

[Erreur] ./node_modules/@fonfesome/fontawesome-svg-core/styles.css 1: 8 Parse Module a échoué: jeton inattendu (1: 8) Vous aurez peut-être besoin d'une chargeuse appropriée pour gérer ce type de fichier, actuellement sans chargeuse n'est configuré. Pour traiter ce fichier

J'ai examiné le plugin CSS , mais cela semble également être un hareng rouge.

Comment puis-je obtenir les icônes de police-génère dans ce paquet pour être stylés sur le serveur avec Next.js?

Answer 1

Voici ce que j'ai essayé jusqu'à présent pour résoudre ce problème dans mon projet:

1. Installation de @ Zeit/Next-CSS, @ Zeit/Next-Sass [J'ai besoin de Sass aussi.]
2. Installation de Fontawesome Packages & Import CSS

Installation de packages @zeit

Installer les packages requis:

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

puis mettez à jour next.config.js Fichier tel que ci-dessous qui prendra en charge l'importation CSS, qui corrige le problème de la chargement des styles corrects lors du chargement:

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
    }
})));

Installation de forfaits fontawesome & Import CSS

Installer les packages requis:

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

Ensuite, vous pouvez utiliser le code suivant dans vos pages s'étendant React.Component situé sous pages répertoire:

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);

Ensuite, c'est la façon dont vous pouvez utiliser des polices:

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

J'ai peut-être tort.