问题标签 [react-styleguidist]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
node.js - react-styleguidist 的问题 - 解决节点依赖关系
我正在使用 React Styleguidedist 为我的 react 组件生成文档。在构建时,我们收到以下错误(纱线)。
错误“react-styleguidist#react-docgen-displayname-handler#react-docgen@2.x”不满足“react-docgen@3.0.0-beta6”的找到匹配
任何指针都会帮助我。
laravel - 无法与 laravel 开发服务器一起运行 styleguidist
我正在尝试记录我的React 组件,并且我正在运行styleguidist 服务器和Laravel 开发服务器,但styleguidist 服务器因此错误而崩溃。
我已将styleguidist 服务器配置为在端口6060上运行以解决此问题,并且仅成功运行了一次服务器。之后我又遇到了这个问题。
我该如何解决这个问题?
javascript - 如何在 react-styleguidist 中添加具有依赖关系的组件示例
我想使用“react-styleguidist”记录一个ButtonGroup
渲染组件的组件。Button
我有一个 styleguidist webpack 配置,如下所示:
我知道我不需要定义常用的加载器和插件,因为 styleguidist 已经在内部添加了它们
在 内部src/components/
,允许styleguidist
获取我的组件的目录结构看起来有点像这样:
案例一
在我Readme.md
的ButtonGroup
目录中:
当我这样做时,我styleguide
有一个错误说:
案例二
如上图所示,我已尝试将信息包含在example.js
内部目录中,该文件包含:ButtonGroup
现在示例组件被导入到Readme.md
:
引发错误:
javascript - 如何使用带有 Apollo/GraphQL 的 Styleguidist 进行配置
我正在尝试使用 GraphQL 为 Styleguidist 填充假数据。我正在使用 Express 制作我的 GraphQL 服务器,但我不确定如何将 Apollo 连接到 Styleguidist?这些示例使用 index.js 文件并将根组件包装在 Apollo 的标签中。
我不确定 Styleguidist 是如何工作的,我不知道 index.js 文件在哪里。
有通过webpack配置Styleguidist的方法,但是不知道怎么用webpack来使用Apollo。
reactjs - React Styleguidist 和 SASS
所以我的设置很简单
styleguide.config.js
每当我运行 npm run styleguide 时,我都会收到此错误:
模块解析失败:意外字符 @ 您可能需要适当的加载程序来处理此文件类型。
bootstrap.scss看起来像这样:
我知道我需要添加 SASS-loader 但我发现的示例使用不同的上下文,所以我还不能真正弄清楚它们。
当我运行应用程序本身而不是样式指南时,ps SASS 在 React Styleguide 之外工作。
reactjs - 当组件有孩子时反应 Styleguidist 失败
我们使用 React Styleguidist 从项目组件的定义中生成文档。我们计划通过 Github 页面提供此类文档。
我们的代码片段:
按钮.tsx
自述文件.md
styleguidist build
通过我们设置的 NPM 脚本运行命令后,一切正常。我们能够看到按钮,其内容回退到默认的“按钮文本”。如果我们将 markdown 文件更改为 include <Button> Default </Button>
,则生成文档的开发版本可以正常工作(并且其按钮预览显示预期的“默认值”。当我们检查文档的构建版本时,我们会收到以下错误:ReferenceError: t is not defined
。没有按钮显示在预览中,只有错误消息。
Styleguidist 生成文档的工作版本和错误版本之间的唯一区别是(据我们所见)在 markdown 自述文件中包含或不包含 Button 组件的子组件。
我们在这里做一些公然错误的事情吗?任何帮助或提示表示赞赏:)
reactjs - 如何将普通文档与 React Styleguidist 混合
我想用 markdown 记录我的代码库的其他功能和部分,并将它们解析并显示在我文档的不同部分。我怎样才能做到这一点?
将它们直接导入styleguide.config.js
会导致整个文件被解析为文本。
reactjs - 在 React Styleguidist 中从外部文件导入 propTypes
我想在多个组件中重用一组通用的 PropTypes。就像是:
我已将此对象添加到文件中,并将其导出为命名的 export textProps
。
然后我将它导入到一个组件文件中:
而组件文件styled-components
用来定义一个组件:
问题是导入时 Styleguidist 指南中未显示“道具和方法”部分textProps
。
当我textProps
在H1
文件中定义时,它按预期工作。
有没有办法定义一组通用的 PropType,将它们导入组件,并让它们出现在 Styleguidist 指南中?
webpack-4 - 如何使用 react-styleguidist 7 和 Webpack 4 加载本地 CSS
我想加载本地 3rd 方 css(例如字体真棒图标)作为我的样式指南的一部分。由于许多组件使用相同的 CSS,我希望它能够自动加载并作为静态构建的一部分包含在内。
我决定使用 mini-css-extract-plugin 来完成这项工作,但 styleguidist 维护者 @sapegin 基本上告诉我,我不知道自己在做什么,并且在不提供任何帮助的情况下停止向他抱怨。所以我希望 stack-overflow 社区能帮我指出正确的方法:
styleguidist 讨论:https ://github.com/styleguidist/react-styleguidist/pull/985#issuecomment-389422909
我的 github 存储库演示了三种方法: https ://github.com/bugzpodder/styleguidist-local-css-example/tree/master
master:使用 mini-css-extract-plugin + 需要配置,构建和 devserver 按预期工作。
要求:没有 mini-css-extract-plugin 我无法让它工作
模板:devserver 有效,但 build 无效。我能想到的唯一解决方法是使用 publicPath 并在那里复制 css,但 publicPath 是不允许的,除非你危险地更新webpackconfig https://github.com/styleguidist/react-styleguidist/pull/956
webpack - Styleguidist - 使用开发 webpack 配置构建
styleguidist server
完美运行(非常感谢)
我现在想构建静态 html 文件以粘贴在 github 页面中,但是..
styleguidist build
似乎源自 favicons-webpack-plugin 的throwsTypeError: Cannot read property 'tapAsync' of undefined
仅在我的生产 webpack 配置中使用。
似乎styleguidist build
将-p
标志传递给 webpack(或以其他方式导致使用此配置),但我更愿意只使用 dev 配置构建。
任何人都知道如何或是否可能?