React-Bootstrap styles not loading with storybook

Question

I started using storybook for my react-typescript project recently and ran into below issues:

1. My react-bootstrap components do not have style. The components are loaded but without styles.I tried using the style-loader and css loader in custom webpack config but did not work.
2. I am importing some local fonts, but the fonts are always loaded inside the Fonts folder. Is there a way to load the fonts in /static/fonts directory? I am using file loader to load the fonts.
3. I have a globalStyles.tsx file and a iconStyles.tsx file which I would like to include globally in the storyboard iframe. What would be the best way to that?

I am running storybook locally on localhost.

Below is my main.js with custom webpack configuration :

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

I don't have a formal answer but perhaps storybook cannot identify by default that bootstrap is being used.

A quick workaround that I'm doing is to add the following line import 'bootstrap/dist/css/bootstrap.css'; on the stories.js files. It allows me to visualize my reactrsap components with their proper styling.