Storybook Stylesheet Disable
A Storybook add-on that makes it easy to disable stylesheets.
Getting Started
yarn add --dev storybook-stylesheet-disable
- Add to your
main.js
config file:
module.exports = {
...,
addons: [
...,
"storybook-stylesheet-disable"
],
...,
};
- Configure
stylesheetId
inpreview.js
within your.storybook
directory:
export const globals = {
...,
stylesheetId: 'your-unique-id-here',
...,
};
- Create a
preview-head.html
file within your.storybook
directory if you don't already have one. - Add the stylesheets you wish to be disabled/enabled via
<link>
tags, giving each one the same unique identifier as atitle
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.)
- Spin up Storybook and you should see a new toolbar button with the
< >
icon, which will disable/enable the specified stylesheets.