Storybook v6集成storybook-readme遇问题：配置代码放置位置咨询

在Storybook 6.x及以上版本中，原有的config.js已被preview.js替代，你需要把addDecorator(addReadme)的代码放到.storybook/preview.js文件中，具体操作如下：

1. 创建/编辑.storybook/preview.js
   在该文件中添加以下代码：

   import { addReadme } from 'storybook-readme';
   import { addDecorator } from '@storybook/react';
   
   addDecorator(addReadme);
   

2. 确认插件配置
   确保你的.storybook/main.js中已正确包含storybook-readme插件（如果之前用addons.js，可以保留，也可以迁移到main.js的addons数组，两种方式都兼容）：

   module.exports = {
     stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
     addons: [
       '@storybook/addon-links',
       '@storybook/addon-essentials',
       'storybook-readme', // 添加这一行
     ],
   };
   

3. 修正故事文件的README配置
   侧边栏无法显示文件可能是因为没在故事参数里指定侧边栏用的README内容，在你的故事文件中补充配置：

   import Readme from './YourComponent.readme.md';
   
   export default {
     title: 'Components/YourComponent',
     parameters: {
       readme: {
         sidebar: Readme, // 指定侧边栏展示的README
       },
     },
   };
   
   // 你的故事案例
   export const Default = () => <YourComponent />;
   

4. 重启Storybook服务
   改动配置文件后需要重启Storybook，确保新的配置生效。

这样配置后，侧边栏的README板块就能正确加载对应的文件内容了。

内容的提问来源于stack exchange，提问作者ComCool