How to get Storybook to use a project's CSS variables

Viewed 1784

I am using Storybook with a React project that also uses styled-components. Many of those style definitions access CSS variable values that are defined in :root in an index.css file at the root of the src directory. All of the CSS variables defined this way are just placeholders for colors. However, when the components are rendered in Storybook the values of the CSS variables aren't being accessed and so those colors never render/display.

Is there a way, either via a plugin or configuration, to make it so the CSS variables I am defining in my index.css file are accessible to the components when they are rendered in Storybook?

1 Answers

You can import CSS file in the .storybook/preview.js file:

import '../src/index.css';

// ... rest of the settings

This way it will be available across all pages in your Storybook.

Related