🚨 已弃用：此包未维护，已弃用，建议使用 @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 [email protected]

加载程序选项

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

您还可以通过覆盖 rule 选项来配置加载程序规则。