Import Global Stylesheets for all Stories in preview.js
In this lesson, we configure Storybook to load global stylesheets for all stories. This is a great way to get general CSS into all stories and useful practice for adding resets, fonts, and globally shared stylesheets.
Michael Chan: [0:00] The Next.js starter application comes with some global styles. You can find them in styles/globals.css. We can see that these styles aren't being applied to our stories, because we're getting a different typeface in stories than is declared in the style sheet. We can fix that by adding our global style sheet to .storybook/preview.js.
[0:23] Just go to the top of this file and import that style sheet at styles/globals.css. Hit Save. Let's refresh Storybook. Now our page is getting all of the global styles needed to render this properly. Our preview.js file controls the canvas for all stories. Anything we import here will be imported across all stories.