Пользовательские шрифты сборника рассказов не отображаются - PullRequest
Новая
       5

Пользовательские шрифты сборника рассказов не отображаются

0 голосов
/ 04 октября 2019

У меня есть тема Material UI, например: 

import { createMuiTheme } from '@material-ui/core/styles'

const primaryColor = '#009baa'

const theme = createMuiTheme({
  typography: {
    fontFamily: ['custom font here'].join(','),
    h1: { color: primaryColor },
    h2: { color: primaryColor, fontSize: '26px' },
  },
  palette: {
    primary: {
      main: primaryColor,
    },
  },
  overrides: {
    MuiButton: {
      root: {
        background: primaryColor,
        textTransform: 'none',
      },
    },
  },
})

export default theme

, используемая в моем основном приложении, например, так: 

...
      <ThemeProvider theme={theme}>
        <Provider store={store}>
          <Calendar />
        </Provider>
      </ThemeProvider>
...

У меня календарь.stories.js вот так:

import { storiesOf } from '@storybook/react'
import { CalendarComponent } from "./Calendar"
import { formatAvailabilitiesData } from '../../__mocks__/availabilities'
import { log } from 'util';
import {muiTheme} from 'storybook-addon-material-ui'
import theme from '../../theme'

const props = {
    selectedAvailablity: formatAvailabilitiesData[0],
    selectedDate: new Date('2019-07-24T07:00:00.000Z'),
    dateClick: () => null,
}

storiesOf("Calendar", module)
  .addDecorator(muiTheme([PeabodyTheme]))
  .add("Basic", () => ( 
    <CalendarComponent {...props} />
))

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

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  config.module.rules.push(
  { 
    test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, 
    loaders: ["file-loader"] 
  });

  // Return the altered config
  return config;
};

Шрифты корректно отображаются в приложении, но не в сборнике рассказов. Я попытался импортировать некоторые локальные CSS и все, кроме шрифтовых работ, что наводит на мысль, что это связано с загрузкой шрифтов. Никаких ошибок в консоли также нет.

ОБНОВЛЕНИЕ

Я даже пытался импортировать CSS непосредственно в свой компонент, например: 

@font-face {
  font-family: 'Poppings';
  src: url('../../assets/fonts/Poppins-Regular.ttf')
}

h2 {
  font-family: 'Poppings'; 
}

ихотя на этот раз шрифт фактически загружается во вкладку сети, компонент сборника рассказов h2 не наследует пользовательский шрифт ....

...