🚨 已废弃：此包已停止维护并废弃，请转而使用 @storybook/addon-styling-webpack 和 @storybook/addon-themes

Storybook PostCSS 插件

Storybook PostCSS 插件可用于在 Storybook 中对你的 stories 运行 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

Loader 选项

你可以通过将选项作为 styleLoaderOptions、cssLoaderOptions 或 postcssLoaderOptions 分别传递给此插件，来为 style-loader、css-loader 和 postcss-loader 指定 loader 选项。

你还可以通过覆盖 rule 选项来配置 loader 规则。