85,947
返回集成
sass

集成Sass与 Storybook 集成

Sass（也称为 scss）是一种流行的 CSS 预处理器，允许开发人员编写更易于维护和重用的样式表。
前提条件

本食谱假设你有一个使用 Sass 的应用程序，并且刚刚使用入门指南设置了 Storybook >=7.0。 还没有设置？ 那么请运行

# Add Storybook:
npm create storybook@latest

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

注意！

某些 Storybook 配置已预先配置为支持 Sass。 如果你的项目符合以下任何条件，则可以跳到下一步。

  • 使用 vite 构建器的 Storybook >= 7.x。
  • 使用 @storybook/nextjs 框架的 Storybook >= 7.x。
  • 使用 @storybook/preset-create-react-app 和 react-scripts@2.x.x 或更高版本的 Storybook >= 7.x。
  • 使用 @storybook/angular 框架的 Storybook >= 7.x

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

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

这将运行一个配置脚本，该脚本将引导你完成插件的设置。 出现提示时，从配置选项中选择 Sass。

配置脚本失败了吗？

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

2. 导入全局样式

如果你有任何想要为你的故事公开的全局样式，你现在可以将它们导入到你的 preview.js 文件中

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

2.1. Angular

如果你正在使用 Angular，则需要将你的全局 scss 文件添加到你的 angular.json 文件中。 这将确保你的样式由 Angular 的 Webpack 处理并注入到渲染你的故事的预览 iframe 中。

// angular.json
{
 "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "my-default-project:build",
      "styles": ["src/index.scss"]
    }
  } 
}

参与进来

现在你已准备好将 Sass 与 Storybook 一起使用。 🎉 如果你在工作中使用 Sass，我们很乐意收到你对 Sass + Storybook 体验的反馈。

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

标签
贡献者
  • ShaunEvening
    ShaunEvening