Search code examples
storybookcss-variables

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

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?

Solution

  • 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.