Integrations
Set up Master CSS in Storybook
Guide to setting up Master CSS in your Storybook project.
Storybook setup
Install Storybook in the application that already uses Master CSS.
npm create storybook@latestWhen Storybook uses the app's Vite configuration, keep Master CSS registered in vite.config.ts and import the app stylesheet from the Storybook preview.
import type { Preview } from '@storybook/react-vite'import '../src/index.css'const preview: Preview = { parameters: {},}export default previewIf Storybook does not load the app's Vite configuration, register Master CSS in viteFinal.
import type { StorybookConfig } from '@storybook/react-vite'const config: StorybookConfig = { framework: '@storybook/react-vite', async viteFinal(config) { const { mergeConfig } = await import('vite') const { default: masterCSS } = await import('@master/css.vite') return mergeConfig(config, { plugins: [ masterCSS() ] }) }}export default configUse the matching Storybook framework package for Vue, Svelte, Angular, or Web Components projects, and keep the stylesheet import pointed at the CSS entry used by your app.