Storybook 擴充套件 Sass PostCSS

描述

Storybook PostCSS 擴充套件可用於對 Storybook 中的 stories 執行支援 Sass 的 PostCSS 預處理器。

：beginner: 強烈建議此擴充套件搭配 Storybook v8 使用，因為它自 v0.2 開始；此擴充套件可能也相容於舊版 Storybook，但將不再對其進行廣泛測試。

開始使用

新增 storybook-addon-sass-postcss 相依性來安裝此擴充套件

yarn add -D storybook-addon-sass-postcss

然後在 .storybook/main.js 內

module.exports = {
  addons: ['storybook-addon-sass-postcss'],
};

並在您的專案根目錄中建立 PostCSS 設定，例如 postcss.config.js，其中包含

module.exports = {
  // Add your installed PostCSS plugins here:
  plugins: [
    // require('autoprefixer'),
    // require('postcss-color-rebeccapurple'),
  ],
};

PostCSS 8+

如果您的專案需要您使用 PostCSS v8，您可以將 postcssLoaderOptions 傳遞給此擴充套件來取代內建的 PostCSS。

首先，您需要將 PostCSS v8 安裝為專案的相依性

yarn add -D postcss@^8

然後，您需要更新您的擴充套件設定。在 .storybook/main.js 中

module.exports = {
  addons: [
-   'storybook-addon-sass-postcss',
+   {
+     name: 'storybook-addon-sass-postcss',
+     options: {
+       postcssLoaderOptions: {
+         implementation: require('postcss'),
+       },
+     },
+   },
  ]
}

執行 Storybook 時，您會在記錄檔中看到正在使用的 PostCSS 版本。例如

info => Using PostCSS preset with postcss@8.2.4

Dart Sass

與上述類似，您可以提供對本地 Sass 編譯器的參考，以調用 Dart Sass。

首先，您需要將 PostCSS v8 安裝為專案的相依性

yarn add -D sass

然後，您需要更新您的擴充套件設定。在 .storybook/main.js 中

module.exports = {
  addons: [
-   'storybook-addon-sass-postcss',
+   {
+     name: 'storybook-addon-sass-postcss',
+     options: {
+       sassLoaderOptions: {
+         implementation: require('sass'),
+       },
+     },
+   },
  ]
}

僅限 Sass

預設情況下，此外掛程式會嘗試轉換 CSS 和 SASS 模組。您可以傳遞 *optional* 引數 rule 來變更此行為。

module.exports = {
  addons: [
-   'storybook-addon-sass-postcss',
+   {
+     name: 'storybook-addon-sass-postcss',
+     options: {
+       rule: {
+         test: /\.(scss|sass)$/i,
+       },
+     },
+   },
  ]
}

與 TailwindCSS 搭配使用

預設情況下，Sass 載入會在 PostCSS 預處理之前完成。但這對於 TailwindCSS 並不適用。因為它依賴於類別名稱和僅透過 PostCSS 外掛程式公開的非標準行為。因此，為了克服這一點，Sass 必須在預處理完成後載入。

module.exports = {
  addons: [
-   'storybook-addon-sass-postcss',
+   {
+     name: 'storybook-addon-sass-postcss',
+     options: {
+       loadSassAfterPostCSS: true,
+     },
+   },
  ]
}

載入器選項

您可以透過將選項分別以 styleLoaderOptions、cssLoaderOptions、sassLoaderOptions 或 postcssLoaderOptions 的形式傳遞給此擴充套件，來指定 style-loader、css-loader、sass-loader 和 postcss-loader 的載入器選項。