web-dev-qa-db-fra.com

utiliser les polices google dans nextjs avec sass, css et uemantic ui react

J'ai un fichier next.config.js qui a la configuration suivante:

const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');

module.exports = withSass(withCss({
  webpack (config) {
    config.module.rules.Push({
      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          publicPath: './',
          outputPath: 'static/',
          name: '[name].[ext]'
        }
      }
    })

    return config
  }
}));

C'est génial car il exécute mes fichiers sss ui css sémantiques.

Maintenant, j'ai un problème. Je n'arrive pas à importer avec succès une URL de police Google. J'ai essayé de télécharger le fichier ttf dans mon chemin de fichier et j'ai essayé de le référencer avec la fonction @import scss. Cependant, j'obtiens une erreur GET http: // localhost: 3000/fonts/Cabin/Cabin-Regular.ttf net :: ERR_ABORTED 404 (Not Found)

Voici ce que j'essaie de faire avec google font:

@font-face {
  font-family: 'Cabin';
  src: url('/fonts/Cabin/Cabin-Regular.ttf')  format('truetype');
}

$font-size: 100px;
.example {
  font-size: $font-size;
  font-family: 'Cabin', sans-serif;
}

J'ai également téléchargé les dépendances npm pertinentes:

"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"file-loader": "^2.0.0",
"next": "^7.0.2",
"node-sass": "^4.9.4",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.83.0",
"url-loader": "^1.1.2"
cssreactjssassnext.js
4
Shaun Chua

Je pense que l'autre solution consiste à utiliser des polices directement à partir de Google. Il suffit de personnaliser _app.js fichier et ajoutez un <link rel="stylesheet" /> dans le <Head />

Exemple _app.js 

import React from 'react';
import App, { Container } from 'next/app';
import Head from 'next/head';

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <Container>
        <Head>
          <link
            href="https://fonts.googleapis.com/css?family=Cabin"
            rel="stylesheet"
            key="google-font-cabin"
          />
        </Head>

        <Component {...pageProps} />

        <style global jsx>{`
          body {
            font-family: 'Cabin', sans-serif;
          }
        `}</style>
      </Container>
    );
  }
}
4
iurii
 class NextApp extends App {
  render() {
    const { Component } = this.props
    return (
          <React.Fragment>
            <Component {...pageProps} />

            <style jsx="true" global>{`

              @import url('https://fonts.googleapis.com/css?family=Roboto');

              body {
                margin: 0;
                font-family: 'Roboto', sans-serif;
              }

            `}</style>

          </React.Fragment>
        </Provider>
      </Container>
    )
  }
}

L'inclusion de l'URL de police de Google Fonts dans styled-jsx a fonctionné pour moi.

2
Furkan Tanyol

Voici comment je charge actuellement les polices externes non bloquantes. Dans la tête _document.js:

<script dangerouslySetInnerHTML={{__html: '</script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" media="print" onload="this.media=\'all\'" /><script>' }} />

source

0
Adam Lane

J'ai dû mettre les fichiers dans le dossier statique pour que cela fonctionne, cela devait être une configuration spécifique pour le rendu des images et des polices dans nextjs

0
Shaun Chua