集成Vanilla Extract与 Storybook

在 TypeScript 中获取零运行时样式表。

先决条件

此方案假设您已经拥有使用 Vanilla-extract 的应用程序，并且刚刚使用入门指南设置了 **Storybook >= 7.0**。没有？请按照 Vanilla-extract 的安装说明进行操作，然后运行

# Add Storybook:
npx storybook@latest init

配置您的 Storybook 构建器

如果您已经在项目中使用 Vanilla Extract，您可能已经安装了这些依赖项。

首先，安装所需的依赖项

# For Vite users
yarn add -D @vanilla-extract/vite-plugin
 
# For Webpack users
yarn add -D @vanilla-extract/webpack-plugin mini-css-extract-plugin

Vite

对于 Vite 用户，Storybook 使用项目的 vite.config.js 进行构建配置。这意味着如果您的项目使用 Vanilla Extract，它也已经为您的 Storybook 配置好了。🎉

您可以在 Stackblitz 上查看完整的示例。

Webpack

对于 Webpack 用户，@storybook/addon-styling-webpack 可以通过几行代码让您的 Storybook 与 Vanilla Extract 配合运行。

运行以下脚本以安装并注册插件

npx storybook@latest add @storybook/addon-styling-webpack

这将运行一个配置脚本，它将引导您完成插件设置。如果出现提示，请选择 Vanilla Extract 作为您的 CSS 处理器。

配置脚本失败了吗？

在幕后，此命令运行 npx @storybook/auto-config styling，它负责读取您的项目并尝试为您的所需工具配置您的 Storybook Webpack。如果直接运行该命令无法解决您的问题，请考虑在 @storybook/auto-config 存储库中提交错误报告，以便我们能够进一步改进它。有关 Less 手动配置说明，您可以参考文档。

手动配置 Webpack

要查看手动配置的示例，您可以在 Stackblitz 上查看完整的示例。

参与

现在您已准备好将 Vanilla Extract 与 Storybook 一起使用。🎉 如果您在工作中使用 Vanilla Extract，我们非常乐意您提供有关 Vanilla Extract + Storybook 体验的反馈。

加入维护者和我们蓬勃发展的社区，在 Discord 中。

标签

贡献者

ShaunEvening