React-Bootstrap样式未随故事书一起加载

Question

我最近开始将我的故事书用于我的react-typescript项目，并遇到以下问题：

1. 我的react-bootstrap组件没有样式。这些组件是加载但没有样式我尝试使用样式加载器和CSS自定义webpack配置中的加载程序，但不起作用。
2. 我正在导入一些本地字体，但是总是加载字体在字体文件夹中。有没有一种方法可以加载字体/ static / fonts目录？我正在使用文件加载器加载字体。
3. 我有一个globalStyles.tsx文件和一个iconStyles.tsx文件，希望将其全局包含在情节提要iframe中。什么会最好的方法吗？

我正在本地主机上运行故事书。

下面是我的具有自定义webpack配置的main.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;
  },
};

Answer 1

我没有一个正式的答案，但也许故事书默认无法识别正在使用引导程序。

我正在做的快速解决方法是在stories.js文件上添加以下行import'bootstrap / dist / css / bootstrap.css';。它使我能够以正确的样式可视化我的reactrsap组件。