reactjs - 在 "storybook js"中提供静态文件

Question

我正在使用故事书文档，无法从 Assets 文件夹加载图像。正如文档所述:“如果您使用自定义 Webpack 配置，则需要将文件加载器添加到自定义 Webpack 配置中” - 我的 webpack.config 文件如下所示:

const path = require('path');


 module.exports = ({ config }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    });
 config.module.rules.push({
   test: /\.(ts|tsx)$/,
   use: [
     {
       loader: require.resolve('awesome-typescript-loader'),
     },
   ],
 });
 config.module.rules.push({
   test: /\.(svg|png|jpe?g|gif)$/i,
   use: [
     {
       loader: 'file-loader',
     },
    ]
  },);

  config.resolve.extensions.push('.ts', '.tsx')


  return config;
};

package.json:

"react": "^16.10.1",
"react-dom": "^16.10.1",
"typescript": "^3.6.3",
"@storybook/react": "^5.2.1",
"@types/storybook__react": "^4.0.2",
"file-loader": "^4.2.0"

这是 yarn 故事书之后

故事书文档中似乎缺少某些内容，或者我做错了什么:?谢谢谁能帮我解决这个问题。 ^_^

Answer 1

在storybook-start脚本中配置静态文件夹对我有用:

文档:Static Files Via Directory

You can also configure a directory (or a list of directories) for searching static content when you are starting Storybook. You can do that with the -s flag.

//package.json
{
"scripts": {
    "start-storybook": "start-storybook -s ./public -p 9001"
  }
}

祝你好运...