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

Question

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

这是纱线故事书

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

Answer 1

如果有人遇到同样的问题，请尝试下面的代码（我正在使用：storybook，react - without create react app，typescript）：

第一个问题是关于打字稿的，这对我有用： 我在根文件夹中创建了 custom.d.ts 文件并将此代码放入其中：

declare module "*.svg" {
  const content: string;
  export default content;
}

declare module "svg-inline-react" 

然后我像这样在 tsconfig.json 中添加这个文件：

"files": [
  "./custom.d.ts"
],

之后，错误 - “找不到 imageName.svg” 消失了，但 svg-inline-react 仍然没有显示图标，现在问题在 'webpack.config.js' 文件中，固定代码写在下面.

const path = require('path');

module.exports = ({ config }) => {

  config.module.rules = config.module.rules.map( data => {
    // This overrides default svg rouls of storybook, and after that we can use 
   //svg-inline-loader.
    if (/svg\|/.test( String( data.test ) ))
      data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani) 
 (\?.*)?$/;
    return data;
  });

    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$/,
      include: path.resolve(__dirname, '../'),
      loader: 'svg-inline-loader'
    });

    config.resolve.extensions.push('.ts', '.tsx')
    return config;
};

^_^

Answer 2

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

文档：Static Files Via Directory

您还可以配置一个目录（或目录列表） 启动 Storybook 时搜索静态内容。你可以做 带有 -s 标志的那个。

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

祝你好运……

Answer 3

解决这个问题：

我有以下文件夹结构??

# root_folder

.storybook/
src/
package.json
...
...

我的图片文件夹位于src/resources/images/my_image.jpg

我通过添加-s ./ 来解决这个问题，如下 ??

"storybook": "start-storybook -s ./ -p 9001"

希望对你有帮助:) ??