介绍
- 经过一系列初始化完成后,
storybook
项目启动出来发现多余了一个ui框架的内容。如下图
- 因为项目中仅仅使用chakraUI的一些功能,并没有使用整体组件功能,所以说完全没必要把它留着这里。
- 经过排查可以使用
storybook
中的refs
功能剔除掉不需要的chakraui框架组件介绍如下代码
(位置:/.storybook/main.ts)
import type { StorybookConfig } from '@storybook/nextjs';const config: StorybookConfig = {stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],refs: {'@chakra-ui/react': { disable: true },},addons: ['@storybook/addon-onboarding','@storybook/addon-links','@storybook/addon-essentials','@chromatic-com/storybook','@storybook/addon-interactions',],framework: {name: '@storybook/nextjs',options: {},},staticDirs: ['..\\public'],
};
export default config;
主要代码:
refs: {'@chakra-ui/react': { disable: true },},
-
更改完上述代码后重新启动项目即可。如下(干干净净最好)
-
如果有其他ui框架或者其他包影响到了都可以使用refs这个去配置
-
其他包:
一些包依赖会自动将它们的Storybook组合到您的Storybook中。
您可以通过将包名称的disable设置为true来禁用此行为:
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';const config: StorybookConfig = {framework: '@storybook/your-framework',stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],refs: {'package-name': { disable: true },},
};export default config;
参考
- 快速进入官网refs配置入口