logo标签列表

在 "storybook js" 中提供静态文件服务

reactjstypescriptwebpackstorybook
17

我正在使用Storybook文档，但无法从资产文件夹加载图像。正如文档所述：“如果您正在使用自定义Webpack配置，则需要将file-loader添加到您的自定义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 storybook 后webpack-debug。

看起来好像storybook的文档缺少了一些内容，或者我做错了什么:? 谢谢能够帮助我解决这个问题的人。^_^

我通过添加以下代码的custom.d.ts文件来修复了错误： declare module "*.svg" { const content: any; export default content; } 错误已经消失，但是图标仍然没有显示:/有什么想法吗？ - Vano
4个回答
11

在storybook-start脚本中配置静态文件对我起了作用：

文档：通过目录提供静态文件

当您启动Storybook时，还可以配置一个目录（或目录列表）来搜索静态内容。您可以使用-s标志来完成这个任务。

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

祝你好运...

对我不起作用。我有一个带有文件加载器的 CRA 项目： 错误：....png 超出了项目 src/ 目录 - Luke359
@Luke359，你可能需要遵循create-react-app文档中关于静态文件的建议。 - Aakash
感谢您的评论。我已经尝试过这个 https://gist.github.com/shilman/bc9cbedb2a7efb5ec6710337cbd20c0c一步一步操作，没有错误，除了那该死的图片。 - Luke359
1
@Luke359，你可以克隆这个仓库https://github.com/appsparkler/reacts。进入**luke/storybook**分支，运行`yarn install和yarn start`。有一个Image Story，你可以验证从公共文件夹渲染的图像。 - Aakash
1
谢谢。实际上我找到了问题所在，导入路径是从localhost/public导入的，但构建只包含public文件夹中的内容，因此要访问public/images，我只需要写images即可。 - Luke359
4

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

第一个问题与typescript有关，以下是适用于我的解决方案： 我在根目录中创建了custom.d.ts文件，并将以下代码放入其中：

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

declare module "svg-inline-react"

然后我像这样将此文件添加到tsconfig.json中：

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

在那之后，错误信息“could't find 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;
};

^_^

3

解决方法：

我有以下文件夹结构:

# root_folder

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

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

我通过添加以下内容来修复这个问题 -s ./

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

希望能有所帮助 :)
1
谢谢您的时间。但我已经解决了这个问题并自己编写了答案，如上所述。再次感谢。 - Vano
1
在最新版本的Storybook（写作时的版本为7）中，使用staticDirs配置元素是推荐的方法。示例：
module.exports = {
   staticDirs: ['../public', './static']
};

我在从Storybook版本6升级到版本7时遇到了这个问题，以前我在CLI中使用了-s，但现在已经被弃用了。 来源
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接