Storybook Addon Sass PostCSS

描述

Storybook PostCSS 插件可用于在 Storybook 中对您的故事运行支持 Sass 的 PostCSS 预处理器。

:beginner: 自 v0.2 起，强烈建议此插件与 Storybook v8 一起使用；该插件可能兼容更早的 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 模块。您可以通过传递*可选*参数 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 指定加载器选项。