Storybook项目中如何正确集成Bootstrap 5？

你提到的在.storybook目录下创建preview-head.html完成引入是可行的常规方案，但不是唯一选项，根据项目需求可以选以下两种经过验证的集成方式：

• 方案1：preview-head.html 全局引入（适合快速原型开发、无自定义主题需求的场景）
  直接在.storybook目录新建preview-head.html文件，在文件内添加Bootstrap 5的CSS资源标签即可，如果需要用到下拉框、模态框这类带交互的Bootstrap组件，再补充引入对应的JS Bundle资源。这种方式配置成本最低，所有Story示例会自动全局加载Bootstrap样式，不需要单组件重复引入，缺点是不方便修改Sass变量做主题定制。

• 方案2：本地依赖引入（推荐生产项目、需要自定义主题的场景使用）

  1. 先在项目中安装Bootstrap 5依赖，执行安装命令：npm install bootstrap
  2. 打开.storybook目录下的preview.js（或preview.ts，对应项目的TS/JS语言环境），全局引入Bootstrap的资源文件即可：

  // .storybook/preview.js
  // 引入Bootstrap基础样式，如果自定义了主题就引入你修改后的自定义scss文件
  import 'bootstrap/dist/css/bootstrap.min.css'
  // 按需引入：用到Bootstrap交互组件时再引入JS包
  import 'bootstrap/dist/js/bootstrap.bundle.min.js'
  

  如果需要定制主题色、圆角、组件默认样式，可以新建自定义scss文件，先覆写Bootstrap提供的Sass变量，再引入Bootstrap的scss源文件，最后在preview.js里引入这个自定义scss文件即可，灵活度远高于CDN引入方式。

注意事项：如果你的业务项目本身已经全局引入了Bootstrap，注意不要在Storybook中重复引入避免样式冲突；引入Bootstrap JS交互能力时，留意和Storybook自带交互逻辑、其他UI库的事件监听是否存在冲突。

内容的提问来源于stack exchange，提问作者PedroSandals