Storybook 插件 Sass PostCSS

描述

Storybook PostCSS 插件可用于在 Storybook 中针对您的故事运行带有 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 [email protected]

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 模块。您可以通过传递可选参数 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 的加载程序选项。