Import Global Stylesheets for all Stories in preview.js

Michael Chan
InstructorMichael Chan
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

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.

egghead
egghead
~ 12 minutes ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today