加入直播:周四,东部时间上午11点,Storybook 9 发布 & AMA
返回集成
sass

集成Sass与 Storybook 集成

Sass(也称为 scss)是一种流行的 CSS 预处理器,它允许开发者编写更易于维护和重用的样式表。
前提条件

本指南假定您已经有一个使用 Sass 的应用,并且刚刚按照入门指南设置了 Storybook >=7.0。还没有设置?那么请运行

# Add Storybook:
npm create storybook@latest

1. 添加 @storybook/addon-styling-webpack

请注意!

一些 Storybook 配置已预先配置为支持 Sass。如果您的项目符合以下任何标准,您可以跳到下一步

  • 使用 vite builder 的 Storybook >= 7.x。
  • 使用 @storybook/nextjs framework 的 Storybook >= 7.x。
  • 使用 @storybook/preset-create-react-appreact-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 的手动配置说明,您可以参考此处的文档。

2. 导入全局样式

如果您有任何想在 stories 中使用的全局样式,现在可以将它们导入到您的 preview.js 文件中

// .storybook/preview.js
 
import '../src/index.scss';

2.1. Angular

如果您使用 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

标签
贡献者
  • ShaunEvening
    ShaunEvening