NextJS集成Storybook加载Bootstrap CDN样式异常求助

我前端经验不多，目前在给一个使用自定义CSS和双版本Bootstrap的NextJS项目配置Storybook。项目通过src/pages/_document.tsx引入Bootstrap 5.2和4.0.0的CDN资源，开发和生产环境都能正常运行，但Storybook里遇到了问题：

1. 默认情况下，Storybook只加载自定义CSS，Firefox网络面板显示完全没请求CDN资源；
2. 按照教程创建.storybook/preview-head.html，把_document.tsx里的Bootstrap链接和脚本放进去后，CDN请求成功了，但组件直接无法渲染；
3. 尝试改用manager-head.html，结果Storybook页面直接白屏。

技术栈 #

• Next 13.1.1
• Typescript 4.4.4
• Storybook 7.0.6
• @storybook/addon-styling 1.0.1
• @storybook/testing-library: 0.0.14-next.2
• Bootstrap 5.2 + 4.0.0（通过_document.tsx引入）

Bootstrap 5.2 CDN资源 #

<link
  href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css'
  rel='stylesheet'
  integrity='sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx'
  crossOrigin='anonymous'
/>
<script
  defer
  src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js'
  integrity='sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa'
  crossOrigin='anonymous'
/>

Bootstrap 4.0.0 CDN资源 #

<script
  defer
  src='https://code.jquery.com/jquery-3.2.1.slim.min.js'
  integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN'
  crossOrigin='anonymous'
/>
<script
  defer
  src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'
  integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q'
  crossOrigin='anonymous'
/>
<script
  defer
  src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'
  integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl'
  crossOrigin='anonymous'
/>

Storybook配置文件 #

.storybook/preview.ts #

import type { Preview } from '@storybook/react'
import '../src/styles/globals.css'
import React from 'react'

// 修复Storybook中NextImage标签的渲染问题
import * as NextImage from 'next/image';
const OriginalNextImage = NextImage.default;
Object.defineProperty(NextImage, 'default', {
  configurable: true,
  value: (props) =>
    React.createElement(OriginalNextImage, { ...props, unoptimized: true }),
})

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview

.storybook/main.ts #

import type { StorybookConfig } from '@storybook/nextjs'
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-styling',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
};
export default config

效果对比 #

• Storybook当前渲染效果：
  
• 预期渲染效果：
  

希望各位能帮忙分析问题原因，或者提供解决思路！

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