1. 需求

项目是umijs搭建的一套，想要加入storybook管理组件。记录下坑

"@umijs/max": "^4.0.71"

"@ant-design/pro-components": "^2.6.2"

storybook：7.x版本

2. 解决问题

2.1. 解析tsx文件

虽然最新的storybook支持typescript，但是不知道为什么，编译不了tsx。

手动添加ts-loader并配置

// .storybook/main.ts
const config: StorybookConfig = {
   // ....
  webpackFinal: async config => {
    config.module?.rules?.push({
      test: /\.(tsx?|jsx?)$/,
      loader: 'ts-loader',
      options: {
        transpileOnly: true
      }
    });
    config.resolve!.alias!['@'] = path.resolve(__dirname, '../src')
    return config;
  }
};

2.2. 不能编译css module

umi的css module不需要写**.module.less，这是因为内部做了配置的，但是默认情况下storybook的配置是不认识的。

首先安装插件@storybook/addon-styling，然后配置。

// .storybook/main.ts
const config: StorybookConfig = {
   // ....
      addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-mdx-gfm',
    {
      name: '@storybook/addon-styling',
      options: {
        // https://github.com/umijs/umi/blob/master/packages/bundler-webpack/src/config/cssRules.ts
        cssModules: {
          localIdentName: '[local]___[hash:base64:5]',
          // 关键就这这一句，所有文件都视为css module
          auto: () => true
        },
        css: {
          importLoaders: 1,
          esModule: true,
          url: {
            filter: (url: string) => {
              // Don't parse absolute URLs
              // ref: https://github.com/webpack-contrib/css-loader#url
              if (url.startsWith('/')) return false;
              return true;
            },
          },
          import: true,
        },
        less: {
          // Require your Less preprocessor here
          implementation: require('less'),

          modifyVars: userConfig.theme,
          javascriptEnabled: true,
          ...userConfig.lessLoader,
        }
      }
    },
  ],
};

其他配置都是参考的umi的配置。参考