Как настроить веб-пакет для загрузки пользовательских шрифтов в сборник рассказов? - PullRequest
Новая
       10

Как настроить веб-пакет для загрузки пользовательских шрифтов в сборник рассказов?

0 голосов
/ 12 февраля 2020

Я новичок в веб-пакете и пытаюсь загрузить пользовательские шрифты в stroybook v4, следуя этому руководству https://medium.com/@mushti_dev / hey-e6faa20b910a

Структура рабочего пространства выглядит следующим образом ( create-response-app + storybook) 

my-project/
  .storybook
     config.js
     preview-hrad.html
     webpack.config.js
  fonts
    MyCustomFont.woff
  src
    components
       Title.js
    containers
    styles
       MyCustomFont.woff
    index.js
  stories

При загрузке шрифта из папки стилей в sr c конфигурация выглядит следующим образом:

webpack .config. js

const path = require('path');

module.exports = async ({ config }) => {
  // fonts
  config.module.rules.push({
    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
    use: [
      {
        loader: 'file-loader',
        query: {
          name: '[name].[ext]',
        }
      }
    ],
    include: path.resolve(__dirname, '../')
  });

  return config;
};

Предварительный просмотр головы. html

<style type="text/css">
  @font-face {
    font-family: 'MyCustomFont';
    src: url('styles/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
</style>

Заголовок. js

import React from 'react';

const Title = ({ title }) => {
  return (
    <div>
      <h2 style={{fontFamily: 'MyCustomFont'}}>{title}</h2>
    </div>
  );
};

export default Title;

Мой вопрос: как загрузить MyCustomFont.woff из папки шрифты ?

Я попытался обновить конфигурацию веб-пакета с помощью name: 'fonts/[name].[ext]', и стиль css с помощью src: url('fonts/MyCustomFont.woff') format('woff');, но мне трудно найти правильный путь к шрифту.

...