如果您已经在项目中使用 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 用户,Storybook 使用您项目的 vite.config.js
进行构建配置。这意味着如果您的项目使用 Vanilla Extract,它也已经为您的 Storybook 配置好了。 🎉
您可以在Stackblitz上查看完整示例。
对于 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 的手动配置说明,您可以参考文档。
有关手动配置的示例,您可以在Stackblitz上查看完整示例。
现在您已准备好将 Vanilla Extract 与 Storybook 一起使用。 🎉 如果您在工作中使用 Vanilla Extract,我们很乐意听取您对 Vanilla Extract + Storybook 体验的反馈。
加入维护者和我们蓬勃发展的社区 Discord。