加入直播会话:周四,东部时间上午 11 点,Storybook 9 发布 & AMA

样式表禁用

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

在 Github 上查看

Storybook 样式表禁用

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

入门指南

  1. yarn add --dev storybook-stylesheet-disable
  2. 添加到你的 main.js 配置文件中
module.exports = {
  ...,
  addons: [
    ...,
    "storybook-stylesheet-disable"
  ],
  ...,
};
  1. 在你的 .storybook 目录下的 preview.js 中配置 stylesheetId
export const globals = {
  ...,
  stylesheetId: 'your-unique-id-here',
  ...,
};
  1. 如果你的 .storybook 目录下还没有 preview-head.html 文件,请创建一个。
  2. 通过 <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> 标签即可。)

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