Laravel Jetstream、惰性とTarwindCSSを使用してストーリーブックを使用してください

あなたのlaravelアプリジェットストリームと慣性を使用して物語を使用するか?
いくつかの抵抗に会って、webpackのためにあきらめましたか?
それから、このポストはあなたを助けるかもしれません.これは、ウェブ上の検索を挫折の結果は、それを動作させることです.あなたがそれを楽しむことを望みます.

巻頭言

始める前に、フロントエンドの私の知識が非常に限られていることを強調したい.ジョン・スタークとして、私は何もウェブパック関連していません、そして、このポストは本当にジェットストリーム、惰語とTailwindで絵本仕事をするのに苦労している人々を助けるためにここにあります.いくつかの巨大な間違いや何かを改善する可能性がある場合は、私を介してご連絡くださいと私は喜んでこのポストを更新します.
このスタックを使ってこの投稿を書きました.

ララベルV 92

ジェットストリームV 2 .7

慣性V 0 .11

V 3の開発

ストーリーブックV 64.21

ストーリーブックをインストール

npx sb initこのコマンドはpackage.json 依存して起動スクリプトのスクリプトを使用します.また、いくつかの依存関係をインストールするには、デフォルトの設定を構築し、いくつかのデフォルトの話を最初に振りかける.
それをインストールした後、あなたは劇的に実行されるStoryBookを実行することを実現します.

info @storybook/vue3 v6.4.21
info
info => Loading presets
info => Using implicit CSS loaders
info => Using prebuilt manager
info => Using default Webpack4 setup
ERR! TypeError: Cannot read property 'NormalModule' of undefined

これは、WebPackの間違ったバージョンを使用しています.これを直しましょう.

適切なWebpackのバージョンを使用してください

つの依存関係を追加することから始めましょうsb init 我々のプロジェクトをsnoopingしながら逃した.
インpackage.json , 私は、これらの2を加えますdevDependencies :

"@storybook/manager-webpack5": "^6.4.21",
"@storybook/builder-webpack5": "^6.4.21",

それから、我々は、2009年に宣言されたオブジェクトに新しいキーを加えることによって、適当なビルダーを使うために、Storybookに話します.storybook/main.js :

"core": {
    "builder": "webpack5",
  },

走りましょうnpm install && npm run storybook そして、今回は、あなたのブランドの新しい童話をチェックできるようにする必要があります!
Jetstreamのコンポーネントの話を追加しましょう.ボタン.

ストーリーを作る

ストーリーブックをインストールすることで来るデフォルトのストーリーを削除してくださいstories/Button.stories.js 私たちのボタンの物語を作成しましょう

import Button from '@/Jetstream/Button.vue';

export default {
  title: 'Jetstream/Button',
  component: Button,
};

const Template = (args) => ({
  components: { Button },
  setup() {
    return { args };
  },
  template: '<Button v-bind="args">Test Button</Button>',
});

export const MyButton = Template.bind({});

物語が解決できないので、それは働くべきではありません'@/Jetstream/Button.vue' .
これを直しましょう.

固定エイリアス

内部.storybook/main.js , 直後にcore キー我々はいくつかの手順を前に宣言し、我々は新しいwebpackFinal そして、私たちが持っているエイリアスをwebpack.mix.js , このように:

"webpackFinal": async (config) => {
      config.resolve = {
          ...config.resolve,
          alias: {
              ...config.resolve?.alias,
              '@': '../resources/js',
          }
      }
      return config;
  }

今私たちのストーリーブックを再起動することができますnpm run storybook そして、それは良いはずです!
まあ完全ではない.風車はどこですか.

風車の輸入

我々は、いくつかの空想のものを行うには童話を伝える必要がありますpostcss …よく、私は知りません、そして、率直に言って、私は尋ねるのが怖いです.しかし、この規則をwebpackFinal キーは、我々は以前にそれが動作するように追加しました.それはクールな権利ですか?…?

config.module.rules.push({
          test: /\.css$/,
          use: [
              {
                  loader: 'postcss-loader',
                  options: {
                      postcssOptions: {
                          implementation: 'postcss',
                          plugins: {
                              tailwindcss,
                          }
                      },
                  },
              },
          ],
          include: path.resolve(__dirname, '../'),
      });
      config.resolve = {
          ...config.resolve,
          alias: {
              ...config.resolve?.alias,
              '@': '../resources/js',
          }
      }
      return config;
  }

私は、それがウェブパックに我々のCSSをコンパイルするためにTailwindのプラグインでPostcssを使用するように言っていると仮定します.あなたがここで起こっていることのより良い定義を得たならば、知らせてください、そして、私はそれを更新します.
このためには、ファイルの先頭にいくつかのものをインポートする必要があります.

const path = require('path');
const tailwindcss = require('../tailwind.config');

そして、我々もインポートしますapp.css 内部.storybook/preview.js :

import '../resources/css/app.css';

今、私たちは再びStorybook et Voilを再起動!ビム!あなたは、あなたの物語nertiaが風になって、走っているようにしました.

最終ファイル

Get a look at the final files here

ボーナス：ランデブーの使用童話

あなたはランノを使用していますか?私は、少しのポストを書きました.