何故か一部css反映されない

開発環境

Laravel Framework 10.30.1

起きた問題

localhostではきちんと反映されるのに、デプロイしたとこでは当たってない... しかも一部のみ...

<button {{ $attributes->merge(['type' => 'submit', 'class' => 'bg-cyan-800 text-white display: inline-block px-16 py-2 rounded-sm']) }}>
    {{ $slot }}
</button>

px-16 → 左右のpaddingのみ当たってない...

原因究明

色々調べた結果、

●リセットcssが原因？
→ デベロッパーツールで確認したけど余計なmarginは見当たらないので違う

●本番用にwebpack.mix.jsに追記？
→ そもそもwebpack.mix.jsない...


●アセットプリコンパイルがきちんとできているか？
→ /public/assetsにあるの確認

なんなんだ...

解決

awsのインスタンスに接続後、

cd /var/www/プロジェクト

に移動後

npm run build

再度、パブリック IPv4 アドレスで行ってみると

なってるーーーーーーー

npm run buildについて調べてみた

作成したVueアプリケーションをコンパイルし、
サーバーアップロード（本番環境）向けにファイルサイズを小さくしたものを生成するコマンド

- npm run build: 本番環境での設定方法(の一部)

jsファイルやCSSファイルなどのマージをしているとのこと

はじめて記事投稿してみて

考えを文字化するのは苦手なのでいい機会だった。
マークダウンの記法もちょろっと知れたし♪
頭の中の整理に良いなって思った。

勉強しつつ、
備忘録・頭の整理として自分のペースであげていけたらな