Storybook使用过程遇到的一些问题

老早就知道 Storybook 这个用于开发组件库生成文档的工具，但一直未在生产环境实践过，下面讲一下我最近遇到的一个问题

• 基本介绍、安装过程暂且不谈，可去官网了解

• Storybook 基础介绍中文文档、最新文档

  问题：docs 文档不显示

• 由于我是接手的别人的项目，这个项目的 storybook 均已初始化完毕，但有一个问题是 docs 菜单不显示内容，这就带来了一个问题：就是我在 storybook 找到了我需要的组件但是我却无法直接复制只能去源码找到相应代码然后拷贝下来其过程十分痛苦繁琐

• 解决问题的步骤

  1. 一度以为是控制台的那个报错影响的不展示，就玩命的搜索这个报错的原因，但怎么都找不到答案，然后看到storybook有个docs的插件-@storybook/addon-docs，安装使用也是无济于事，docs 菜单怎么也搞不出来
  2. 然后想到初始化一个最简单的 storybook 项目看一看它与现有项目中的配置哪里不一致，然后利用 npx sb init 文档初始了一个项目，这里多说一句，官方文档指明 sb init 不针对一个空项目，而是一个已经使用框架的项目
  3. 然后启动发现 docs 菜单是能正常显示的，配置文件 main.js 也没有安装 @storybook/addon-docs 该插件
  4. 然后我就把现有项目的 storybook 的配置文件 (.storybook 目录) 删掉，所有依赖 package.json 的东西全删掉，然后在根目录执行 npx sb init
  5. 执行 yarn storybook 然后奇迹发生了，docs 目录出现了 😄😄😄，符合预期，但由于项目中使用 tailwindcss，storybook 中的组件的样式全都丢失了

  6. 又去搜索 storybook + react + tailwindcss 如何组合使用，找到了这篇文章 解决了我的问题，docs 菜单菜单出现了

     

  7. 完整的配置如下

     // .storybook/main.js 
     const path = require('path')
     module.exports = {
       stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
       addons: [
         '@storybook/addon-links',
         '@storybook/addon-essentials',
         '@storybook/addon-interactions',
         '@storybook/addon-storysource', // 用于底部菜单栏出现 story 选项
         '@storybook/preset-create-react-app',
       ],
       // tailwindcss 与 storybook 配合使用
       webpackFinal: async config => {
         config.module.rules.push({
           test: /\.css&/,
           use: [
             {
               loader: 'postcss-loader',
               options: {
                 ident: 'postcss',
                 plugins: [require('tailwindcss'), require('autoprefixer')],
               },
             },
           ],
           include: path.resolve(__dirname, '../'),
         })
         return config
       },
     
       framework: '@storybook/react',
       core: {
         builder: 'webpack5',
       },
     }

  参考文章

• storybook中文文档
• 基于 Storybook 5 打造 Style 组件库开发与文档站建设小结
• Storybook 入门指南