Импорт шрифтов для взаимодействия проекта с веб-пакетом и стилизованными компонентами - PullRequest
Новая
       36

Импорт шрифтов для взаимодействия проекта с веб-пакетом и стилизованными компонентами

1 голос
/ 06 марта 2019

Я пытаюсь импортировать шрифты из локального ресурса в моем реактивном проекте, который использует веб-пакет и стилизованные компоненты. У меня есть папка шрифтов со следующим кодом: 

import { css } from 'styled-components';
import { fontWeight } from './vars';

export const fontFaces = css`
  @font-face {
    font-family: 'OurFont';
    src: url('/resources/fonts/OurFont-Bold.woff2') format('woff2');
    font-weight: ${fontWeight.bold};
    font-style: normal;
  }
`;

тогда у меня есть глобальный файл стилей с: 

import { createGlobalStyle } from 'styled-components';
import { fontFaces } from './fonts';

export const GlobalStyles = createGlobalStyle`
  ${fontFaces}
`;

В своем компоненте приложения я использую ThemeProvider из таких стилевых компонентов (для краткости здесь опущен некоторый код, не относящийся к делу): 

import { ThemeProvider } from 'styled-components';

class App extends React.Component {
render() {
  return (
    <ThemeProvider theme={{ theme }}>
      <GlobalStyles />
      <AppHeader />
      <AppNavigator />       
    </ThemeProvider>
  );
}}

и соответствующий код из веб-пакета: 

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: ['babel-loader'],
    },
    {
      test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            limit: 10000,
            mimetype: 'application/font-woff',
          },
        },
      ],
    },

Я попытался следовать совету из этого потока , но, похоже, он не работает для меня, поскольку я получаю сообщение об ошибке в консоли, в котором говорится: GET http://localhost:5001/resources/fonts/OurFont-Bold.woff2 net :: ERR_ABORTED 404 (Не Found).

Кто-нибудь знает, что я делаю неправильно или есть другой подход? Спасибо!

Ответы [ 2 ]

1 голос
/ 06 марта 2019

Вы можете решить эту проблему, импортировав шрифт в JS и передав его в тег шаблона CSS css в стиле: 

import { css } from 'styled-components';
import { fontWeight } from './vars';

import myFontURL from '../../mypath/fonts/OurFont-Bold.woff2';

export const fontFaces = css`
  @font-face {
    font-family: 'OurFont';
    src: url(${myFontURL}) format('woff2');
    font-weight: ${fontWeight.bold};
    font-style: normal;
  }
`;

Не забудьте использовать /resources/fonts/OurFont-Bold.woff2 и использовать относительный путьвместо этого в каталог вашего текущего файла.

0 голосов
/ 07 марта 2019

Столкнулся с той же проблемой и попробовал вышеуказанное решение, но оно не работает, и я получаю сообщение об ошибке: Cannot find module '../fonts/Roboto-BlackItalic.ttf'

Я использую машинопись, поэтому мне нужно добавить какое-тоэкспорт, чтобы иметь возможность использовать оператор импорта для такого рода пути?

Редактировать: решается добавлением declare module "*.ttf"; в мой файл typings.d.ts и удалением формата ("ttf") в src: url(${fontUrl}) format("ttf"); в @ font-face

...