Question

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

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

我正在本地主机上运行Storybook。

下面是我的main.js，具有自定义的webpack配置：

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

您所要做的就是将{s}文件作为mentioned in the docs导入.storybook/preview.js中。

Answer 2

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

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

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

2 个答案: