やること
Laravelで開発したアプリをEC2を使ってデプロイした際に、本番環境でTailwindが反映させる。
Laravel9からLaravel MixがViteに置き換わり、今回初めて使用したのでその備忘録として記録します。
Tailwindをインストール
公式の手順に従いTailwindをインストールする
手順い従い、各ファイルに必要なコードを追記する。
コンパイル設定を追記する
vite.config.jsファイルに以下を追記し、コンパイルされるように設定する。
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css', //ここを追記
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
レイアウトファイルに@vite('resources/css/app.css')を追記し、コンパイルされたTailwindが読み込まれるように設定する。
app.blade.php
<head>
<title>@yield('title')</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
@vite('resources/css/app.css')
</head>
本番環境用にbuildする
Viteを使用して、Tailwindをインストールした際に、自動的にdevとbuildのスクリプトが設定されているので、buildを使用して、本番環境にbuildする。
npm run build
package.json
{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
}