时间戳

首页 > 解决方案 > 在“storybook js”中提供静态文件

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

问题描述

我正在使用故事书文档，无法从资产文件夹加载图像。正如文档所说：“如果您使用的是自定义 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;
};

包.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"

这是纱线故事书之后webpack-调试

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

标签： reactjstypescriptwebpackstorybook

解决方案

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

文档：通过目录的静态文件

您还可以在启动 Storybook 时配置目录（或目录列表）以搜索静态内容。您可以使用 -s 标志来做到这一点。

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

祝你好运...

推荐阅读