web-dev-qa-db-ja.com

sass、css、およびsemantic ui reactを使用したnextjsでのGoogleフォントの使用

次の構成を持つnext.config.jsファイルがあります。

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

私のセマンティックui cssファイルを実行するため、これは素晴らしいことです。

今、私は問題を抱えています。 GoogleフォントのURLを正常にインポートできないようです。 TTFファイルをファイルパスにダウンロードして、@ import scss関数で参照しようとしました。ただし、GET http：// localhost：3000/fonts/Cabin/Cabin-Regular.ttf net :: ERR_ABORTED 404（Not Found）エラーが発生します

これが私がグーグルフォントでやろうとしていることです：

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

関連するnpm依存関係もダウンロードしました。

"@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

他の解決策は、Googleから直接フォントを使用することだと思います。 _app.js file をカスタマイズして、<link rel="stylesheet" />を<Head />に追加するだけです。

例_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>
    )
  }
}

Google FontsのフォントURLをstyled-jsxに含めるとうまくいきました。

2
Furkan Tanyol

Hhisは現在、外部フォントをノンブロッキングでロードしています。 _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>' }} />
  • dangerouslySetInnerHTMLといくつかのスクリプトハッキングonloadを回避するために_document.jsから削除される これが解決されるまで

ソース

0
Adam Lane

ファイルを静的フォルダーに配置して機能させる必要があり、nextjsで画像とフォントをレンダリングするための特定の設定であったに違いありません

0
Shaun Chua