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，您應該會看到一個帶有 < > 圖示的新工具列按鈕，它將停用/啟用指定的樣式表。