React- Bootstrap стилей не загружается с сборником рассказов - PullRequest
0 голосов
/ 01 апреля 2020

Я недавно начал использовать сборник рассказов для своего проекта «Реактивная машинопись» и столкнулся с проблемами, приведенными ниже:

  1. Мои компоненты реакции - bootstrap не имеют стиля. Компоненты загружаются, но без стилей. Я попытался использовать style-loader и css loader в пользовательской конфигурации webpack, но это не сработало.
  2. Я импортирую некоторые локальные шрифты, но шрифты всегда загружаются внутри Папка шрифтов. Есть ли способ загрузить шрифты в каталог / static / fonts? Я использую загрузчик файлов для загрузки шрифтов.
  3. У меня есть файл globalStyles.tsx и файл iconStyles.tsx, которые я хотел бы включить глобально в раскадровку iframe. Каков наилучший способ для этого?

Я запускаю сборник рассказов локально на локальном хосте.

Ниже приведен мой основной. js с пользовательской конфигурацией веб-пакета:

module.exports = {
  stories: ['../src/stories/**/*.stories.[tj]s','../src/stories/**/*.stories.tsx'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /(?<!.*\.test)\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('ts-loader'),
        }
      ]
    },
    {
      test: /\.ttf$|\.woff$|\.eot$|\.otf$/,
      use: [
        {
        loader: 'file-loader',
        options: {
          outputPath: '/static/fonts',
        },

        },
      ]

    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
    );
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  },
};
...