3

我有一个使用故事书的 lerna + yarn 工作区 monorepo。
每个包/组件都有自己的 /assets 文件夹，其中包含以下静态图像：

/packages
     /component1
            /assets
                  ... 静态图片
            index.tsx
     /component2
            /assets
                  ... 静态图片
            index.tsx

在官方文档中，它说包含-s选项，但它仅适用于单个通用资产文件夹，而不适用于每个包： start-storybook -p 6006 -s assets

如何为每个组件提供故事书中的这些静态资产？

4

2 回答 2

4

如果您通过, 此处记录的 a 拆分它们，则可以指定多个静态目录。

另外，如果您将源位置和路径位置拆分为:未记录的，您还可以指定一个路径，但您可以在此处查看源代码中的拆分调用。

在这种情况下将其放在一起，您可以运行

"scripts" {
  "storybook": "start-storybook -s ./packages/component1/assets:assets,./packages/component2/assets:assets"
}
于 2021-01-12T12:22:46.460 回答
2

好吧..似乎不支持开箱即用，所以这是我解决问题的方法，希望对其他人有所帮助。

基本思想是将所有包的所有静态资产复制到故事书输出目录中：

包.json

"scripts": {
    // build the storybook and run copy assets script
    "build-storybook": "build-storybook -c .storybook -o .out && yarn copy-storybook-assets",
    // clean output directory, copy the assets to the output directory and run the storybook
    "dev": "yarn clean-storybook-output && yarn copy-storybook-assets && start-storybook -p 6006 -s .out",
    // clean the output directory
    "clean-storybook-output": "rimraf .out",
    // run on all the packages and copy all the static assets to the output directory
    "copy-storybook-assets": "copyfiles -f \"packages/**/assets/*\" -u 1 .out"
  },
于 2019-12-05T06:38:48.520 回答