StorybookでVueJS + PostCss + Tailwindを構成する方法

Question

Storybookのコンポーネント開発でVueJS、PostCss、Tailwindを使用してプロジェクトをセットアップすることに成功した人はいますか？

私はこれまでに得ました：

1. 新しいvueプロジェクト（vue-cli 3.0.5）
2. @ storybook/vue（4.0.0-alpha.25）
3. tailwindcss（0.6.5）
4. <style lang="postcss"> ... </style>を使用してコンポーネントを作成します
5. スタイルブロック内でTailwind@applyを使用して、ユーティリティクラスをコンポーネントに適用します

私が遭遇する問題は、ストーリーブックを実行しているときに、コンパイル中にlang="postcss"を使用するためにストーリーを作成するコンポーネントが失敗することです。

エラーを停止するカスタムwebpack構成を追加しようとしましたが、どのコンポーネントもまだスタイル設定されていません。

const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.postcss$/,
                loaders: ["style-loader", "css-loader", "postcss-loader"],
                include: path.resolve(__dirname, '../')
            }
        ]
    }
}

また、app.postcssファイル自体にstories.js（追い風をインポートする）をインポートしようとしましたが、役に立ちませんでした。どんな助けでもいただければ幸いです。

Answer 1

Lang <style lang="postcss"> ... </style>にpostcssを追加した理由がわかりません

<style lang="css"> ... </style>を追加するだけです

postcssは言語ではなく、cssを解析するためのwebpackプラグインです。