集成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 存储库上提交 bug 报告，以便我们进一步改进它。有关 Less 的手动配置说明，您可以参考此处的文档。

2. 导入全局样式

如果您有任何希望为您的故事公开的全局样式，现在可以将其导入到您的 preview.js 文件中

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

参与进来

现在您已准备好在 Storybook 中使用 Less。🎉 如果您在工作中也使用 Less，我们非常希望您能分享您对 Less + Storybook 体验的反馈。

加入维护者和我们蓬勃发展的社区，请访问 Discord。