🚨 已棄用：此套件已不再維護且已棄用，請改用 @storybook/addon-styling-webpack 和 @storybook/addon-themes

Storybook 外掛程式 PostCSS

Storybook PostCSS 外掛程式可用於對您在 Storybook 中的故事執行 PostCSS 預處理器。

開始使用

透過新增 @storybook/addon-postcss 相依性來安裝此外掛程式

yarn add -D @storybook/addon-postcss

在 .storybook/main.js 中

module.exports = {
  addons: ['@storybook/addon-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-postcss',
+   {
+     name: '@storybook/addon-postcss',
+     options: {
+       postcssLoaderOptions: {
+         implementation: require('postcss'),
+       },
+     },
+   },
  ]
}

執行 Storybook 時，您將在日誌中看到正在使用的 PostCSS 版本。例如

info => Using PostCSS preset with postcss@8.2.4

載入器選項

您可以透過分別將選項作為 styleLoaderOptions、cssLoaderOptions 或 postcssLoaderOptions 傳遞給此外掛程式，來指定 style-loader、css-loader 和 postcss-loader 的載入器選項。

您也可以透過覆寫 rule 選項來設定載入器規則。