Global preview-head.html for Storybook

Expected Behavior

If I add a preview-head.html in the root .storybook directory, to add custom styles (like Angular Material Icons) to Storybook, I would expect them to be applied to all storybook instances in the workspace.

Current Behavior

I have to add the same preview-head.html in the .storybook directory of all libs.

[mandarini]

Hi @twittwer . It’s in our plans to address this issue with a schematic, possibly, along with other extra config files for Storybook. I’ll keep this issue updated.

[wizardnet972]

@twittwer for now, you can use this solution: (for global use. at .storybook folder in the root)

module.exports = {
  stories: ...,
  addons: ...,
  previewHead: (head) => `
    ${head}
    <style>
       * {border: 1px solid red;}
    </style>
  ` 
  ....