Шрифт не загружается при использовании styled-компонентов с реагировать и сборником рассказов - PullRequest
Новая
       25

Шрифт не загружается при использовании styled-компонентов с реагировать и сборником рассказов

0 голосов
/ 30 января 2020

Я создаю приложение на основе React, Typescript со сборкой на Webpack. Так что в основном все работает нормально при использовании webpack или webpack-dev-server. Но потом я захотел использовать сборник рассказов и хочу поместить несколько шрифтов в каталог моего проекта. И в sotrybook я не вижу свои шрифты, они почему-то не работают - я думаю, что это может быть связано с веб-пакетом.

Я использую это для загрузки шрифтов: 

//globalStyle.ts
import { createGlobalStyle } from "styled-components";
import bender from "../resources/fonts/Bender.otf";

const GlobalStyle = createGlobalStyle`
@font-face {
    font-family: 'Bender';
    src: url(${bender});
    font-weight: 400;
    font-style: normal;
}

Так что использование этого в коде как <GlobalStyle/> со сборкой веб-пакета по умолчанию работает. Но чтобы применить эффект для каждого компонента сборника рассказов, я использую этот декоратор: 

import * as React from "react";
import GlobalStyle from "../src/styles/globalStyle";
import mainTheme from "../src/styles/mainTheme";
import { ThemeProvider } from "styled-components";
import { configure, addDecorator } from "@storybook/react";

const req = require.context("../src/", true, /\.stories\.tsx$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

const withGlobal = storyFn => {
  return (
    <ThemeProvider theme={mainTheme}>
      <GlobalStyle />
      {storyFn()}
    </ThemeProvider>
  );
};

addDecorator(withGlobal);
configure(loadStories, module);

Переходя к инспектору сборника рассказов, я вижу, что стиль загружен, но, глядя на поля @font-face, я вижу что-то вроде 

@font-face {
src: url()
/**/
}

Таким образом, URL шрифта пуст. Я попытался заменить в своем коде это import на require(_path_), и src: url() был заполнен, но затем по этому адресу не было файла.

Я использую пользовательскую конфигурацию сборника рассказов: 

const path = require('path');

module.exports = {
    stories: ['../src/**/*.stories.tsx'],
    addons: ['@storybook/preset-typescript'],
    webpackFinal: async config => {
        config.module.rules.push(
            {
                test: /\.(ts|tsx)$/,
                use:
                    [
                        { loader: require.resolve('ts-loader') },
                        { loader: require.resolve('react-docgen-typescript-loader') },
                    ],
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg|otf)$/,
                use: [
                    {
                        loader: require.resolve('url-loader'),
                    },
                ],
            },
        );
        config.output.publicPath = "http://localhost:9001/"
        config.resolve.extensions.push('.js', '.jsx', '.ts', '.tsx');
        return config;
    },
}

1 Ответ

1 голос
/ 27 марта 2020

У меня была похожая проблема, потому что мой шрифт не загружался, поэтому я добавил ссылку на шрифт в файл preview-head.html внутри .storybook папки.

Проверьте https://storybook.js.org/docs/configurations/add-custom-head-tags/

...