返回集成
less

集成Less与 Storybook 集成

Less 是一种流行的 CSS 预处理器,可帮助您编写更小、可重用的样式。
前提条件

本食谱假设您有一个使用 Less 的应用程序,并且刚刚使用入门指南设置了 Storybook >=7.0。 还没有设置? 那么运行

# Add Storybook:
npm create storybook@latest

1. 配置您的 Storybook 构建器

开始之前

如果您使用 Vite 作为 Storybook 构建器,则可以跳到下一步

首先,安装@storybook/addon-styling-webpack插件。

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

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

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

配置脚本失败了吗?

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

2. 导入全局样式

如果您有任何希望为您的 stories 公开的全局样式,您现在可以将它们导入到您的 preview.js 文件中

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

参与进来

现在您已准备好将 Less 与 Storybook 一起使用。 🎉 如果您在工作中使用 Less,我们很乐意听取您对 Less + Storybook 体验的反馈。

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

标签
贡献者
  • ShaunEvening
    ShaunEvening