解决storybook7.0中全局引入css样式

如果想要在storybook中引入全局样式，目前官方并未有提供一个完全的例子来供开发中使用，而且全英文下要精确找到解决问题还是比较吃力，以下是我的配置解决

1. main.ts

/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const path = require('path');
const config = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
  docs: {
    autodocs: 'tag',
  },
  staticDirs: ['..\\public'],
};
export default config;

1. preview.ts

/*
 * @Description:
 * @Author: Ran junlin
 * @Date: 2023-05-08 16:34:34
 * @LastEditTime: 2023-05-08 18:22:03
 * @LastEditors: Ran junlin
 */
/** @type { import('@storybook/react').Preview } */
import '../src/styles/index.scss';
const preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  cssresources: [
    {
      id: 'global',
      code: `
        
      `,
      picked: true,
    },
    {
      id: 'button',
      code: `
        
      `,
      picked: false
    }
  ]
};

export default preview;