问题标签 [storybook]

我如何将故事书用于角度？

我遵循了主要指南，但当我选择任何组件时仍然空白 https://storybook.js.org/basics/guide-angular/

更新： 我将我的角度转换为使用 SCSS 而不是 SASS，它可以工作。但webpack.config.jsin.storybook不处理图像或字体。

我在运行故事书时遇到错误....即使在干净的安装上也是如此。

我正在使用最新的故事书版本。我的节点版本是6.11.1而npm版本是5.5.1

我也尝试使用纱线安装故事书，但我面临同样的问题 纱线版本1.3.2

我正在尝试学习如何将 Storybook 用于我使用 Vue.js 的项目，但我似乎无法使插件“插件链接”工作，因为文档主要在 React 中。

我安装了

插件“插件操作”有效。

对于“插件链接”，我在网上使用了各种示例，这里是其中之一。

包.json

console.log作品。Storybook UI 有效，按钮生成事件，但不会更改为使用linkto.

谁能帮我解决这个问题？

我在我的项目中添加了一个自定义webpack.config.js文件，.storybook以便我可以导入.scss文件。这是我直接从故事书文档中添加的内容。

这是我的故事：

当我记录一些 Button 样式时，这些对象中的每一个似乎都是空的。

为什么这些对象是空的？如何让 scss 与故事书一起使用？

因此，在开发人员辞职后，我继承了一个小型故事书库，而我的 webpack/故事书不是我的强项。

问题是配置 Storybook 构建以输出可导出组件有多容易。我想把我的 Storybook 组件（不是组件的故事，而是底层组件本身）变成一个私有的 npm 包，这样我就可以将它们导出到其他项目中。

我的故事书是@storybook react 3.2.11 running typescript / scss 我的文件结构看起来像这样......

我的 config.js 看起来像这样......

我的 .storybook webpack.config.js 看起来像这样。

想知道是否有人设置了类似的东西

我一直在尝试将故事书用于我的 Angular 项目，并且我使用本指南https://storybook.js.org/basics/guide-angular/ 我将推荐的 webpack 配置用于 scss 文件的 sass 加载器和相关的 scss 文件到项目工作正常，但如果我在 stories index.ts 文件中导入 scss 文件，则不会加载该文件。

故事/index.ts

.storybook/webpack.config.js（推荐在这里 --> https://storybook.js.org/basics/guide-angular/#configure-style-rules）

而且，我的组件的 scss 文件加载没有问题

src/app/modules/ui-common/video-poster/video-poster.component.ts

存储库： https ://github.com/gpincheiraa/storybook-components-sample

运行npm install && npm run storybook检查故事书运行。

我做错了什么？？

我正在尝试创建一个故事书测试，该测试在使用 typescript、babel 和 webpack 的模块中使用 react 组件。My Map react 组件引用并使用 cesium 和 cesium-react 组件。

当我尝试运行 start-storybook (yarn storybook) 时出现错误：

如果我用谷歌搜索这个错误'模块解析失败。意外字符“#”。#4603' 我在结果列表顶部看到类似的问题，建议尝试一些事情。

• 添加自定义加载程序（参考 4603）
• 尝试使用 shebang loader（参考 4603/531）
• 根本不测试（参考 170）
• 此外，其中一个链接到 jsonstream 的一个非常相似的错误，可以通过谷歌搜索“node target should ignore hashbang #2168”找到

我的主要问题是：

1. 我曾尝试使用自定义加载程序和 shebang 加载程序（参考 2168），但似乎都不起作用。甚至可以解决这个错误并在故事书中运行吗？关于 JSONstream 的研究表明，使用 shebang 加载程序可以解决问题，而我只是没有正确配置。
2. 假设 shebang loader 是推荐的可能解决方案中最好的，那么我在 .storybook/webpack.config.js 中可能做错了什么（显然我正在做的事情不起作用）。

我应该注意到：

• 如果我不尝试使用打字稿加载器，我可以获得故事书来运行我的地图组件。如果我将 Map 故事添加到来自 github 的 cesium-react 项目的副本，我可以运行它。
• 此处显示的我的地图组件已尽可能简化，以便尝试识别和解决我的导入问题。但是，目的是我的实际 Map 组件将使用 Typescript 实现。

以下是我认为相关文件的片段，但如果被问到，我很乐意发布其他文件或片段。

• .storybook/webpack.config.js

  /li>

• .storybook/config.js

  /li>

• 故事/map.stories.js

  /li>

• 源代码/组件/Map.js。如果我在 Map.js 中取消注释我的 cesium-react 导入，则会发生错误。

  /li>

• package.json（片段，如果认为有必要，我可以提供更多文件）

  /li>

我正在创建一个带有 react、lerna和storybook的 monorepo 组件库来显示我的组件。每个组件都有自己的包。这样我就可以将组件导入多个项目，而不需要整个用户界面。我面临的主要问题与符号链接包有关。

例子：

我有一个 Button 组件/包和一个 SlideoutMenu 组件都未发布。用于故事书/开发中的展示目的。我想将 Button 导入 SlideoutMenu 的故事中。这样我就可以用它来触发菜单。基本上这是一个开发依赖。它不包含在 SlideoutMenu 的构建中。

我如何链接这种类型的依赖关系？

我已经尝试使用在本地工作的 npm 链接对它们进行符号链接，但是如果我将分支推送到 github，至少目前当同事拉出显然不理想的存储库时，符号链接会丢失。不太确定如何让符号链接与 git/github 一起使用

我也尝试在 SlideoutMenu 中添加这样的依赖项package.json

这可以导入，但如果我更新ui-button组件的背景颜色。ui-buttonSlideoutMenu 组件中的依赖项将不会更新我lerna bootstrap在进行此更新后尝试运行，但它似乎没有更新 SlideoutMenu 中已安装的包。

我想要一些关于如何使用符号链接来管理 monorepos 依赖项和 dev 依赖项的输入，并且在从 github 中提取 repo 时可供同事使用。

我正在制作故事书。尝试加载生成的文件时，出现此错误。

axios-mock-adapter仅适用于axios使用?

我编写了一个 POST 到 API 的组件（使用 vanilla XHR，而不是 axios）。我正在 Storybook 中对其进行测试，并希望拦截那些 POST 请求，因为端点还不存在：

我的组件仍在尝试访问 API 端点，我得到了 404 响应 - 而不是预期的 500 响应。

axios-mock-adapter仅适用于axios使用? mock电话必须在里面吗MyComponent？

谢谢。