解决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 configreturn 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;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！