问题标签 [storybook]

scss我的文件的相对导入不适用于故事书的webpack 配置。实际应用程序的 Webpack 配置运行良好。

这是我的项目结构：

似乎./_table.scss我的 main 的相对导入styles.scss没有被加载，因为在渲染组件时样式似乎错误。

这是两个 webpack 配置：

项目之一

故事书的一本

不起作用的导入是：

关于为什么相对导入不起作用，我有什么遗漏吗？或者你需要更多关于我的 Webpack 配置的信息？（我认为没有其他帮助）

我有一个我创建的 React 应用程序，create-react-app并添加了故事书。当我运行yarn run storybook它时，当我更改文件时它不会重新加载。

我的应用程序布局如下

这是我的 package.json

我没有自定义 web pack 配置。我需要做什么才能使热模块重新加载工作？

我们在 Angular 故事书中在哪里包含任何外部字体？我正在使用物化 css 和一些谷歌字体。HTML：

CSS：在 angular-cli.json 我有这个

我在运行节点版本 6.3.1 和 npm 版本 3.10.6 的 Windows 7 上使用Storybook版本 3.3.15。

在运行故事书时，我在呈现操作面板的页面底部看到“没有可用的面板”消息。我已经导入addon-actionsaddons.js:import @storybook/addon-actions/register并且该模块也存在于node_modules文件夹中。在 webpack 编译或浏览器控制台中，我没有收到任何关于此的错误。

如何使操作面板出现？

注意：我无法更新 Node 和 NPM 版本，因为我正在开发一个涉及很多人的专业级应用程序，而且它的代码库非常大。

我正在尝试将Stencil和Storybook集成到同一个项目中。我一直在关注这个设置指南，但是其中一个步骤是将组件库发布到 NPM，这不是我想要的。

我有这个repo，我用组件库（src文件夹）和这些组件的审阅者配置了 Storybook，它位于storybook文件夹中。

问题是，当我使用 Stencil 编译组件并复制distStorybook 应用程序中的文件夹并导入组件时，没有任何渲染。使用自定义头部标签调整配置我能够正确导入它，但是没有应用样式。

当我打开网络面板时，导入组件时出现一些错误：

因此该组件存在于 DOM 中，但可见性设置为隐藏，我认为它在出现错误时会这样做。

这是组件au-button：

这是我的组件的故事：

这些是 Storybook 应用程序中的脚本：

工作流程如下：

1. 推出故事书
2. 在组件中进行更改
3. 执行构建命令
4. 执行复制命令

另外，我想自动化开发人员体验，但在我先解决了这个问题之后。

关于我可能做错了什么的任何想法？

我有一个带有条件渲染的组件：'如果组件具有道具“showCross”，则显示一个带有十字的按钮，除非什么都没有'。一切正常，当有 showCross 时，就有十字架，除非什么都没有：

但问题是当我在另一个组件中使用这个组件时，即使 prop 被传递给 false，十字仍然显示（我想隐藏它）：

控制台没有错误，只是没有按预期显示。通过 React 开发者工具我可以看到 props 和预期一样为 false，但是显示不符合显示条件（即：'display nothing'）。最重要的是故事书，但我不确定这与显示问题有关：

我正在使用 Storybook 插件storybook-addon-specifications编写我的单元测试。我在必须使用setTimeout函数的情况下遇到问题。

在这种情况下，用户交互和控制台日志作用于所需的输出，而规格标签中的测试日志状态仍然过时。示例代码如下：

我无法使用 Angular 2+ 在 Storybook 中使用旋钮编辑道具的值。旋钮 Github 的 readme.md 有以下行

Storybook Addon Knobs 允许您使用 Storybook UI 动态编辑 React 道具。您还可以将旋钮用作 Storybook 中故事的动态变量。

这是否意味着 Angular 至少现在是不可能的？我的代码在 index.stories.ts 中：

以前，我也尝试过使用组件而不是模板，但我无法更改此处和此处所示的 props 的值。任何指向示例或文章的链接都将受到高度赞赏。

我使用最新的Vue CLI创建了一个应用程序。

我正在使用vue-storybook生成样式指南。

我在名为 icons.svg 的资产下有一个 SVG Sprite 文件，我想创建一个 Icon.vue 组件，该组件接受图标的名称并从精灵中显示它。

该组件如下所示：

我有一个简单的故事来展示它：

问题是浏览器尝试加载 http://localhost:6006/assets/icons.svg但找不到它，我尝试了所有类型的网址，但我似乎无法找出正确的网址。

另外，我怎样才能使它动态？

我正在使用vue 的故事书来生成样式指南，并且我想为“src”文件夹添加一些别名，以便我可以轻松地引用组件和 scss 文件。

所以我webpack.config.js在下面添加了文件.storybook：

但是当我尝试引用一个 scss 文件时，我得到一个错误：

模块构建失败：@import "~/main"; ^ 找不到或无法读取要导入的文件：~/main.

我也试过了，~main但还是一样。

我错过了什么？