previewHead
父级: main.js|ts 配置
类型: (head: string) => string
以编程方式调整 Storybook 的预览 <head>
。最常由 插件作者 使用。
如果您不需要以编程方式调整预览 head,您可以改为将脚本和样式添加到 preview-head.html
中。
例如,您可以根据环境有条件地添加脚本或样式
.storybook/main.ts
// 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)'],
previewHead: (head) => `
${head}
${
process.env.ANALYTICS_ID ? '<script src="https://cdn.example.com/analytics.js"></script>' : ''
}
`,
};
export default config;