CODEWITHSUNDEEP
webpackreact-bootstrapstorybook
user2053459
user2053459

Reputation: 145

React-Bootstrap styles not loading with storybook

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;
  },
};

Upvotes: 9

Views: 9072

Answers (3)

Giacomo Marciani
Giacomo Marciani

Reputation: 442

You should import both Bootstrap CSS and JS in .storybook/preview.js:

import 'relative/path/to/bootstrap/dist/css/bootstrap.css'
import 'relative/path/to/bootstrap/dist/js/bootstrap.js'

Just tested with storybook/react-6.3.7 and bootstrap-5.1.0.

Upvotes: 9

Capi Etheriel
Capi Etheriel

Reputation: 3640

All you have to do is import your css file in .storybook/preview.js, as mentioned in the docs.

Upvotes: 5

Salvador Fernandez Covarrubias
Salvador Fernandez Covarrubias

Reputation: 61

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.

Upvotes: 6

Related Questions