использование google-шрифтов в nextjs с sass, css и семантическим интерфейсом - PullRequest
Новая
       10

использование google-шрифтов в nextjs с sass, css и семантическим интерфейсом

0 голосов
/ 02 ноября 2018

У меня есть файл 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
  }
}));

Это здорово, потому что он запускает мои файлы семантического интерфейса CSS.

Теперь у меня проблема. Я не могу успешно импортировать любой URL-адрес шрифта Google. Я попытался загрузить файл ttf в путь к файлу и попытался сослаться на него с помощью функции @import scss. Однако я получаю ошибку GET http://localhost:3000/fonts/Cabin/Cabin-Regular.ttf net :: ERR_ABORTED 404 (не найдено)

Вот что я пытаюсь сделать с помощью шрифта Google: 

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

Ответы [ 3 ]

0 голосов
/ 03 ноября 2018

Я думаю, что другое решение - использовать шрифты прямо из Google. Просто настройте _app.js файл и добавьте <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>
    );
  }
}
0 голосов
/ 07 мая 2019 
 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>
    )
  }
}

Включение URL шрифта из Google Fonts в styled-jsx работало для меня.

0 голосов
/ 02 ноября 2018

Мне пришлось поместить файлы в статическую папку, чтобы она работала, должно быть, это была специальная настройка для рендеринга изображений и шрифтов в nextjs

...