Storybook 样式表禁用

一个 Storybook 插件，可以轻松禁用样式表。

入门指南

1. yarn add --dev storybook-stylesheet-disable
2. 添加到你的 main.js 配置文件中

module.exports = {
  ...,
  addons: [
    ...,
    "storybook-stylesheet-disable"
  ],
  ...,
};

3. 在你的 .storybook 目录下的 preview.js 中配置 stylesheetId

export const globals = {
  ...,
  stylesheetId: 'your-unique-id-here',
  ...,
};

4. 如果你的 .storybook 目录下还没有 preview-head.html 文件，请创建一个。
5. 通过 <link> 标签添加你希望禁用/启用的样式表，为每个样式表提供一个 title 属性作为相同的唯一标识符

<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">

（如果你愿意，这个工具也可以反向操作。只需将 disabled 属性添加到 <link> 标签即可。）

6. 启动 Storybook，你会看到一个新的工具栏按钮，带有 < > 图标，它可以禁用/启用指定的样式表。