ci4sManagement-cloud/react-ui/.storybook/main.ts

import type { StorybookConfig } from '@storybook/react-webpack5';
import path from 'path';
import webpack from 'webpack';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    // '@storybook/addon-webpack5-compiler-swc',
    '@storybook/addon-webpack5-compiler-babel',
    '@storybook/addon-onboarding',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  staticDirs: [
    '../public',
    { from: '../docs', to: '/docs' },
    { from: '../docs/index.html', to: '/docs/index.html' },
  ],
  docs: {
    defaultName: 'Documentation',
  },
  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src'),
        '@umijs/max$': path.resolve(__dirname, './mock/umijs.mock.tsx'),
      };
    }
    if (config.module && config.module.rules) {
      config.module.rules.push(
        {
          test: /\.less$/,
          oneOf: [
            {
              resourceQuery: /modules/,
              use: [
                'style-loader',
                {
                  loader: 'css-loader',
                  options: {
                    importLoaders: 1,
                    import: true,
                    esModule: true,
                    modules: {
                      localIdentName: '[local]___[hash:base64:5]',
                    },
                  },
                },
                {
                  loader: 'less-loader',
                  options: {
                    lessOptions: {
                      javascriptEnabled: true, // 如果需要支持 Ant Design 的 Less 变量，开启此项
                      modifyVars: {
                        hack: 'true; @import "@/styles/theme.less";',
                      },
                    },
                  },
                },
              ],
              include: path.resolve(__dirname, '../src'), // 限制范围，避免处理 node_modules
            },
            {
              use: [
                'style-loader',
                'css-loader',
                {
                  loader: 'less-loader',
                  options: {
                    lessOptions: {
                      javascriptEnabled: true, // 如果需要支持 Ant Design 的 Less 变量，开启此项
                      modifyVars: {
                        hack: 'true; @import "@/styles/theme.less";',
                      },
                    },
                  },
                },
              ],
              include: path.resolve(__dirname, '../src'), // 限制范围，避免处理 node_modules
            },
          ],
        },
        {
          test: /\.(tsx?|jsx?)$/,
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
          },
          include: [
            path.resolve(__dirname, '../src'), // 限制范围，避免处理 node_modules
            path.resolve(__dirname, './'),
          ],
        },
      );
    }
    if (config.plugins) {
      config.plugins.push(
        new webpack.ProvidePlugin({
          React: 'react', // 全局注入 React
        }),
      );
    }

    return config;
  },
  babel: async (config: any) => {
    if (!config.plugins) {
      config.plugins = [];
    }

    config.plugins.push(path.resolve(__dirname, './babel-plugin-auto-css-modules.js'));
    return config;
  },
};
export default config;