Блог

Я уже некоторое время использую storybook, но я все еще не мог понять причину, по которой storybook имеет свою собственную конфигурацию webpack.

Например, если я настраиваю абсолютный путь tsconfig.json , я должен сделать то же самое для storybook.

Или, если я хочу использовать загрузчик для типа файла, мне приходится делать это снова для storybook, и это немного раздражает.

Может кто-нибудь объяснить это или как вы преодолели эту проблему в своих предыдущих проектах?

@nishkaush Я должен опубликовать комментарий, чтобы вы могли его прочитать. Итак, я решил это (загрузчик для svg), даже если это заняло много моего времени. Посмотрите, если вам интересно.

 webpackFinal: async (config) => {
    const fileLoaderRule = config.module.rules.find(
      (rule) => rule.test amp;amp; rule.test.test('.svg'),
    )
    fileLoaderRule.exclude = /.svg$/

    config.module.rules.push({
      test: /.svg$/,
      enforce: 'pre',
      loader: require.resolve('@svgr/webpack'),
    })

    return config
  },
  

Вы можете поместить это в свой storybook webpack config ( main.js )

И это для конфигурации project webpack:

 webpack(config) {
    config.module.rules.push({
      test: /.svg$/,
      issuer: {
        test: /.(js|ts)x?$/,
      },
      use: ['@svgr/webpack'],
    })

    return config
  },
  

Не забудьте установить @svgr/webpack

Сегодня у меня была такая же проблема. Конфигурация webpack Storybook использует SVG-loader , тогда как моя конфигурация webpack использует file-loader .

Итак, хотя использование SVG в качестве img ‘s src работало для моего проекта, это не сработало для Storybook.

Меня это действительно раздражало.

Пришлось переписать все мои иконки, которые использовали тег img, чтобы использовать встроенный SVG. Потраченный впустую день!