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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!