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

（如果需要，此工具也可以反向操作。只需在 <link> 标签中添加 disabled 属性。）

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