React-Bootstrap 样式未与故事书一起加载

关键词：

【中文标题】React-Bootstrap 样式未与故事书一起加载【英文标题】：React-Bootstrap styles not loading with storybook 【发布时间】：2020-07-12 19:36:07 【问题描述】：

我最近开始在我的 react-typescript 项目中使用 storybook 并遇到了以下问题：

我的 react-bootstrap 组件没有样式。组件是 已加载但没有样式。我尝试使用样式加载器和 css 加载器在自定义 webpack 配置中，但没有工作。 我正在导入一些本地字体，但字体总是被加载 在字体文件夹中。有没有办法加载字体 /静态/字体目录？我正在使用文件加载器来加载字体。 我有一个 globalStyles.tsx 文件和一个 iconStyles.tsx 文件，我 想在故事板 iframe 中全局包含。什么会 是最好的方法吗？

我正在本地主机上运行故事书。

下面是我的 main.js 和自定义 webpack 配置：

module.exports = 
  stories: ['../src/stories/**/*.stories.[tj]s','../src/stories/**/*.stories.tsx'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async config => 
    config.module.rules.push(
      test: /(?<!.*\.test)\.(ts|tsx)$/,
      use: [
        
          loader: require.resolve('ts-loader'),
        
      ]
    ,
    
      test: /\.ttf$|\.woff$|\.eot$|\.otf$/,
      use: [
        
        loader: 'file-loader',
        options: 
          outputPath: '/static/fonts',
        ,

        ,
      ]

    ,
    
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    
    );
    config.resolve.extensions.push('.ts', '.tsx');
    return config;
  ,
;

【问题讨论】：

这个运气好吗？已经尝试了所有的答案，但没有运气。 【参考方案1】：

您应该在.storybook/preview.js 中同时导入 Bootstrap CSS 和 JS：

import 'relative/path/to/bootstrap/dist/css/bootstrap.css'
import 'relative/path/to/bootstrap/dist/js/bootstrap.js'

刚刚使用 storybook/react-6.3.7 和 bootstrap-5.1.0 进行了测试。

【讨论】：

好一个，非常简单的解决方案:)【参考方案2】：

您所要做的就是在.storybook/preview.js 中导入您的css 文件，如mentioned in the docs。

【讨论】：

不知道为什么这是最受欢迎的答案。这很明显，并没有回答如何让引导样式与故事书一起使用的问题。 我发现这个问题正是因为我试图在故事书中拥有自己的 react-boostrap 组件并且它们缺乏样式。我给出的答案是在故事书的不和谐频道中向我建议的。它确实解决了我的问题。【参考方案3】：

我没有正式的答案，但也许故事书默认情况下无法识别正在使用引导程序。

我正在做的一个快速解决方法是在 stories.js 文件中添加以下行 import 'bootstrap/dist/css/bootstrap.css'; .它使我能够以适当的样式可视化我的 reactrsap 组件。

【讨论】：

为啥 vue-loader 不能与故事书一起使用？

】为啥vue-loader不能与故事书一起使用？【英文标题】：Whyisn\'tvue-loaderworkingwithstorybook?为什么vue-loader不能与故事书一起使用？【发布时间】：2019-04-1507:13:45【问题描述】：我正在使用vuetify和storybook。当我尝试查看我的组件时（... 查看详情

故事书未显示样式

】故事书未显示样式【英文标题】：Storybooknotshowingstyles【发布时间】：2021-04-0215:58:39【问题描述】：我有一个在内部使用Primereact对话框的对话框组件。当我为此制作故事书时，正在导入按钮的自定义css，因为它是在dialog.jsx中导... 查看详情

画布区域样式的正确方法是故事书

】画布区域样式的正确方法是故事书【英文标题】：Whatisthecorrectwaytostylecanvasareaisstorybook【发布时间】：2020-05-2720:40:49【问题描述】：在故事书中，所有故事都紧紧靠在容器的左上角。当显示在相关容器之外具有视觉外观的项目... 查看详情

无法将 material-ui 与故事书“无法解析 '@emotion/react'”一起使用

】无法将material-ui与故事书“无法解析\\\'@emotion/react\\\'”一起使用【英文标题】：Cannotusematerial-uiwithstorybook"Can\'tresolve\'@emotion/react\'"无法将material-ui与故事书“无法解析\'@emotion/react\'”一起使用【发布时间】：2022-01-0201:15... 查看详情

如何在故事书 iframe 上设置 CSS 样式

】如何在故事书iframe上设置CSS样式【英文标题】：Howtosetcssstylesonstorybookiframes【发布时间】：2021-03-1823:48:09【问题描述】：我希望在故事书画布和文档上设置全局样式。谁能给我一个出路？谢谢！【问题讨论】：您是否尝试过stor... 查看详情

如何更改故事书中的特定元素样式？

】如何更改故事书中的特定元素样式？【英文标题】：Howtochangespecificelementsstyleinstorybook?【发布时间】：2021-12-1609:51:29【问题描述】：在我的情况下，我只想更改默认的默认颜色，以默认的主页部分为例：WerecommendbuildingUIswitha[**c... 查看详情

样式化组件 + 故事书：当我传递新样式时，SVG 图标不会重新渲染

】样式化组件+故事书：当我传递新样式时，SVG图标不会重新渲染【英文标题】：Styledcomponents+Storybook:SVGIconisnotre-renderingwhenIpassnewstyles【发布时间】：2021-07-2106:20:26【问题描述】：我正在尝试创建一个SvgIcon组件，我通过道具将SVG... 查看详情

如何使用样式图标输出故事书中的图标列表

】如何使用样式图标输出故事书中的图标列表【英文标题】：Howtooutputalistoficonsinstorybookwithstyled-icons【发布时间】：2021-04-1310:57:35【问题描述】：目前我正在手动添加图标，但是对于几个图标，这种方式没有问题。但是如果有100... 查看详情

Textarea 值未与表单一起发布

】Textarea值未与表单一起发布【英文标题】：Textareavaluenotgettingpostedwithform【发布时间】：2013-09-1922:29:16【问题描述】：我在提交表单时尝试输入textarea标签：<textareaid="confirmationText"class="text"cols="86"rows="20"name="confirmationText"form="co... 查看详情

yield from 未与 future 一起使用

】yieldfrom未与future一起使用【英文标题】：yieldfromwasn\'tusedwithfuture【发布时间】：2019-09-0611:10:35【问题描述】：我正在运行以下命令，使用requests-threads:defperform_requests():prepared_requests=[...]session=AsyncSession(n=100)results=[]asyncdef_perform_r 查看详情

React-bootstrap 元素没有样式

】React-bootstrap元素没有样式【英文标题】：React-bootstrapelementsdoesnothavestyling【发布时间】：2016-05-0813:37:17【问题描述】：我正在使用react.js和react-router和webpack开发一个webapp。我想使用react-bootstrap进行样式设置，但我的导航栏似乎... 查看详情

Cookie 未与 Ajax 调用一起存储

】Cookie未与Ajax调用一起存储【英文标题】：CookienotstoredwithAjaxcall【发布时间】：2015-04-2506:21:08【问题描述】：我对cookie和ajax调用感到疯狂。我的配置很简单。我在8282端口（localhost.com:8282）上运行一个网站。我的网站在8080端口... 查看详情

故事书错误无法读取未定义的属性“位置”

】故事书错误无法读取未定义的属性“位置”【英文标题】：StorybookerrorCannotreadproperty\'location\'ofundefined【发布时间】：2020-09-1421:35:21【问题描述】：我正在尝试让我的Storybook与我的React应用程序一起工作。我正在使用redux4.0.1。... 查看详情

如何在 vue 的故事书中显示材料设计图标

...参考方案1】：如果问题是Storybook没有下载材料设计图标样式表，您可以将preview-head. 查看详情

SpriteKit 着色器未与制服一起运行

】SpriteKit着色器未与制服一起运行【英文标题】：SpriteKitShadernotrunningwithUniforms【发布时间】：2016-03-2701:13:50【问题描述】：//贴出来以防万一有人遇到同样的问题。原来的问题：将着色器移植到OSX，并尝试为其提供制服。着色器... 查看详情

引导标签输入标签值未与表单一起提交

】引导标签输入标签值未与表单一起提交【英文标题】：bootstraptagsinputtagvalueisnotsubmittingwithform【发布时间】：2021-04-1615:36:05【问题描述】：有人可以解释这里发生了什么吗？我不明白为什么我在标签输入字段中提交的值没有与... 查看详情

参数对象（API 密钥）未与 axios.create 一起发送

】参数对象（API密钥）未与axios.create一起发送【英文标题】：paramsobject(APIkey)notbeingsentwithaxios.create【发布时间】：2019-11-0517:53:37【问题描述】：我正在使用axios.create实例向MovieDBAPI发出获取请求。我附加的包含API密钥的params对象... 查看详情

动态创建的索引字段未与表单一起提交

】动态创建的索引字段未与表单一起提交【英文标题】：Dynamicallycreatedindexfieldsnotbeingsubmittedwithform【发布时间】：2012-03-0322:07:50【问题描述】：我正在使用jQuery为电子邮件地址动态创建新字段，其中包含一个用于指定电子邮件地... 查看详情