StorybookJS 如何将 Bootstrap 5 集成到 Storybook 实现中？答案

【问题标题】：StorybookJS How do I integrate Bootstrap 5 into a Storybook implementation?StorybookJS 如何将 Bootstrap 5 集成到 Storybook 实现中？
【发布时间】：2023-02-17 13:37:53
【问题描述】：

我目前正在构建一本故事书，并希望在其中实施 Bootstrap 5。实现它的最佳方法是在 .storybook 目录中使用 preview-head.html 文件吗？我查看了文档和 YouTube 视频，但看不到有关框架实现的任何内容

【问题讨论】：

请提供足够的代码，以便其他人可以更好地理解或重现问题。

标签： javascript reactjs react-bootstrap storybook

【解决方案1】：

使用 Storybook 和 Bootstrap 5 - NPM 包

Storybook 的官方文档在“配置 Storybook”部分和“概述 - 配置故事渲染”子部分下提供了有关如何将 Bootstrap 5 添加到 Storybook 项目的指南。

https://storybook.js.org/docs/react/configure/overview#configure-story-rendering

在撰写本文时，它是这样写的：

配置故事渲染要控制故事的呈现方式并添加全局装饰器和参数，请创建一个 .storybook/preview.js 文件。这是在 Canvas 选项卡中加载的，即单独呈现组件的“预览”iframe。将 preview.js 用于适用于所有故事的全局代码（例如 CSS 导入或 JavaScript 模拟）。

脚步

以下是将 Bootstrap 5 添加到 Storybook 项目的步骤：
通过运行以下命令安装Bootstrap 5： npm install bootstrap
在 .storybook/preview.js 文件中导入 Bootstrap CSS 文件。
它应该是这样的：
// .storybook/preview.js
import 'bootstrap/dist/css/bootstrap.min.css';
重新启动 Storybook，您应该会看到应用于故事的 Bootstrap 样式。

【讨论】：