Reactjs 为什么'；storybook是否使用与项目中相同的网页配置？

我已经使用storybook一段时间了，但我仍然不明白storybook有自己的网页配置背后的原因

例如，如果我在

tsconfig.json

中配置了一个绝对路径，我必须对storybook做同样的事情

或者，如果我想对文件类型使用加载器，我必须对storybook再次使用加载器，这有点烦人

---

有人能解释一下这一点吗？或者你在以前的项目中是如何克服这些麻烦的？

我今天也遇到了同样的问题。Storybook的网页配置使用

SVG加载器

，而我的网页配置使用

文件加载器

因此，即使使用SVG作为

img

的

src

对我的项目有效，但对故事书却不起作用

我真的很生气

---

必须重新编写所有使用img标记的图标，以使用内联SVG。浪费了一个下午

@nishkaush我必须发表一条评论供你阅读。所以我确实解决了这个问题（svg的加载器），尽管它花费了我很多时间。如果你感兴趣的话，看看

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

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

    return 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

请看我上面的评论，我希望在重新编写所有代码之前看到这一点，但以后知道这一点总是好的。非常感谢你花时间把它全部写出来！