storybook [Bug]: 第三方全局样式无法加载

oalqel3c 于 5个月前发布在其他

关注(0)|答案(6)|浏览(66)

将第三方CSS文件(node_modules中的CSS文件)导入到.storybook/preview.tsx文件中，但该CSS并未加载到预览iframe中。

重现仓库：https://github.com/halcarleton/storybook-radix-issue
使用以下命令创建一个基本的NextJS应用：

npx create-next-app@latest
npx storybook@latest init

然后将Radix主题安装并集成到Next应用和Storybook预览中。
重现步骤：

附加调试步骤：

将Radix Theme的styles.css文件的内容复制到项目的./src/app/globals.css文件中。
npm run storybook
注意，Example/Button/Primary故事现在包含了正确的样式。
这表明问题不在于导入的CSS文件，而是似乎特定于从node_modules导入。
快速参考，这是.storybook/preview.tsx文件的内容：
这是由storybook init命令初始化的base内容。更新的部分包括：

6条答案

我遇到了相同的问题，但是在使用 @rainbow-me/rainbowkit 时，它们在 preview.tsx 和我在故事书中 Package 的故事的提供者中都被导入为以下内容，但在 Storybook 环境中都没有效果：

import "@rainbow-me/rainbowkit/styles.css";

更新：我通过在 main.ts 中添加以下内容使样式生效：

{
      name: "@storybook/addon-styling",
      options: {
        postCss: true,
      },
    }

我知道这个包已经被弃用，所以如果你走这条路，你可能需要安装它分成的两个中的一个。

@halcarleton,你有没有找到一个绕过这个问题的方法？

你是否找到了一个绕过的方法？
解决方法是将第三方CSS复制到项目中的一个文件中，并以这种方式引用它，直到Storybook的一侧有修复。
参见："附加调试步骤"以上

另一个更可行的解决方法是创建一个 globals.css 或 globals.scss,具体取决于你使用的是什么，并从 "node_modules" 中导入 css。例如：

// globals.scss or globals.css file
@import '@radix-ui/themes/styles.css';

然后在你的 storybook 文件中导入 globals.scss 或 css 文件：

// .storybook/preview.ts or .storybook/preview.tsx file
import '../globals.scss'

这对我有效！

@efaraz27 这个方法对我也有效，谢谢你！

我也经历了同样的情况，@efaraz27的解决方法对我有效。