Stylesheet Disable

A Storybook add-on that makes it easy to disable stylesheets.

View on Github

Storybook Stylesheet Disable

A Storybook add-on that makes it easy to disable stylesheets.

Getting Started

  1. yarn add --dev storybook-stylesheet-disable
  2. Add to your main.js config file:
module.exports = {
  ...,
  addons: [
    ...,
    "storybook-stylesheet-disable"
  ],
  ...,
};
  1. Configure stylesheetId in preview.js within your .storybook directory:
export const globals = {
  ...,
  stylesheetId: 'your-unique-id-here',
  ...,
};
  1. Create a preview-head.html file within your .storybook directory if you don't already have one.
  2. Add the stylesheets you wish to be disabled/enabled via <link> tags, giving each one the same unique identifier as a title attribute:
<link rel="stylesheet" href="./path-to-css-file-1.css" type="text/css" title="my-unique-id">
<link rel="stylesheet" href="./path-to-css-file-2.css" type="text/css" title="my-unique-id">
<link rel="stylesheet" href="./path-to-css-file-3.css" type="text/css" title="my-unique-id">

(This tool can operate in reverse, too, if you wish. Simply add the disabled attribute to the <link> tags.)

  1. Spin up Storybook and you should see a new toolbar button with the < > icon, which will disable/enable the specified stylesheets.