Storybook 样式表禁用
一个 Storybook 插件,可以轻松禁用样式表。
入门指南
yarn add --dev storybook-stylesheet-disable
- 添加到你的
main.js
配置文件中
module.exports = {
...,
addons: [
...,
"storybook-stylesheet-disable"
],
...,
};
- 在你的
.storybook
目录下的preview.js
中配置stylesheetId
export const globals = {
...,
stylesheetId: 'your-unique-id-here',
...,
};
- 如果你的
.storybook
目录下还没有preview-head.html
文件,请创建一个。 - 通过
<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>
标签即可。)
- 启动 Storybook,你会看到一个新的工具栏按钮,带有
< >
图标,它可以禁用/启用指定的样式表。