webpack - React-Bootstrap 样式未加载故事书

Question

我最近开始在我的 react-typescript 项目中使用故事书，但遇到了以下问题:

我的 react-bootstrap 组件没有样式。组件是
已加载但没有样式。我尝试使用样式加载器和 css
加载器在自定义 webpack 配置中，但没有工作。

我正在导入一些本地字体，但字体总是被加载
字体文件夹内。有没有办法加载字体
/static/fonts 目录？我正在使用文件加载器来加载字体。

我有一个 globalStyles.tsx 文件和一个 iconStyles.tsx 文件，我
想在 Storyboard 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

我没有正式的答案，但也许故事书默认情况下无法识别正在使用 bootstrap 。

我正在做的一个快速解决方法是添加以下行 导入 'bootstrap/dist/css/bootstrap.css'; 在 故事.js 文件。它使我能够以适当的样式可视化我的 reactrsap 组件。