15

VueJS、PostCss、および Tailwind を使用して、Storybook でコンポーネント開発を行うプロジェクトの設定に成功した人はいますか?

私はここまで来ました：

  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, '../')
            }
        ]
    }
}

また、ファイル自体にmy app.postcss(tailwind をインポートする) をインポートしようとしましたが、役に立ちませんでした。stories.jsどんな助けでも大歓迎です。

4

3 に答える 3

8

この github レポhttps://github.com/jerriclynsjohn/svelte-storybook-tailwindに、Svelte + TailwindCSS + Storybook の完全に機能する例があります。

しかし、統合は非常に似ているはずです:

  1. TailwindCSS が Vue プロジェクトに統合されたら、次に進みます。
  2. フォルダーにカスタムwebpack.config.jsを.storybook追加し、次を追加します。
const path = require('path');

module.exports = ({ config, mode }) => {

  config.module.rules.push({
    test: /\.css$/,
    loaders: [
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: true,
          config: {
            path: './.storybook/',
          },
        },
      },
    ],

    include: path.resolve(__dirname, '../storybook/'),
  });

  return config;
};
  1. 次を使用して、フォルダーに を作成postcss.config.jsします。.storybook
var tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    require('postcss-import')(),
    tailwindcss('./tailwind.config.js'), //This refers to your tailwind config
    require('autoprefixer'),
  ],
};
  1. utils.cssストーリーブック フォルダーにファイルを追加する
@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';
  1. 次の場所で CSS ファイルを参照します<>.stories.js。
import '../../css/utils.css';

github リポジトリの実装を参照することを強くお勧めします。Storybook に固有のものもあります。(ギットハブ)

于 2019-09-01T10:22:35.430 に答える