本指南假定您已经有一个使用 Sass 的应用,并且刚刚按照入门指南设置了 Storybook >=7.0。还没有设置?那么请运行
# Add Storybook:
npm create storybook@latest
@storybook/addon-styling-webpack
一些 Storybook 配置已预先配置为支持 Sass。如果您的项目符合以下任何标准,您可以跳到下一步。
vite
builder 的 Storybook >= 7.x。@storybook/nextjs
framework 的 Storybook >= 7.x。@storybook/preset-create-react-app
和 react-scripts@2.x.x
或更高版本的 Storybook >= 7.x。@storybook/angular
framework 的 Storybook >= 7.x运行以下脚本来安装和注册插件
npx storybook@latest add @storybook/addon-styling-webpack
这将运行一个配置脚本,指导您完成插件的设置。当提示时,从配置选项中选择 Sass
。
在内部,此命令运行 npx @storybook/auto-config styling
,它负责读取您的项目并尝试为所需的工具配置 Storybook Webpack。如果直接运行该命令不能解决您的问题,请考虑在 @storybook/auto-config 仓库上提交错误报告,以便我们进一步改进它。有关 Sass 的手动配置说明,您可以参考此处的文档。
如果您有任何想在 stories 中使用的全局样式,现在可以将它们导入到您的 preview.js
文件中
// .storybook/preview.js
import '../src/index.scss';
如果您使用 Angular,则需要将全局 scss 文件添加到您的 angular.json
文件中。这将确保您的样式由 Angular 的 Webpack 处理并注入到渲染 stories 的预览 iframe 中。
// angular.json
{
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
"browserTarget": "my-default-project:build",
"styles": ["src/index.scss"]
}
}
}
现在您就可以在 Storybook 中使用 Sass 了。🎉 如果您在工作中使用 Sass,我们非常乐意听取您关于 Sass + Storybook 使用体验的反馈。
加入维护者和我们蓬勃发展的社区,请访问 Discord。