集成Less与 Storybook
Less 是一种流行的 CSS 预处理器，可以帮助您编写更小、可重用的样式。
先决条件
此教程假设您正在使用一个使用 Less 的应用程序，并且刚刚使用 入门指南 设置了 **Storybook >=7.0**。如果没有，请运行
# Add Storybook:
npx storybook@latest init1. 配置 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. 导入全局样式
如果您有任何希望为您的故事公开的全局样式，您现在可以将它们导入到 preview.js 文件中
// .storybook/preview.js
import '../src/index.less';参与进来
现在您已准备好使用 Storybook 中的 Less 了。🎉 如果您在工作中使用 Less，我们非常乐意收到您对 Less + Storybook 体验的反馈。
加入维护人员和我们蓬勃发展的社区，加入 Discord。
标签
贡献者
- ShaunEvening
