はじめに
週末は主人とモーターサイクルショーに行ってきました。楽しかった。
さて表題の件。
正直、正しく解決はしてないかもしれない。
定石通りに
まず、LaravelさんのUIがLaravel Viteになってるとは思わなかった浦島太郎状態から始まります。
ウマ娘やってる間に変わったんか？w
今回はLaravel ViteとTailwind CSS、Flowbiteを導入したコードをもらい、Dockerで動かします。
vite.config.jsは以下のとおり。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});tailwind.config.js は以下のとおり。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
"./node_modules/flowbite/**/*.js",
],
theme: {
extend: {},
},
plugins: [require("flowbite/plugin")],
};この状態で
npm run devを投げた状態では画面が見えるんですが、ターミナルを落とすとコマンドが切れてしまう。
npm run buildでpublic/build/配下にファイルができる。手筈です。
https://biz.addisteria.com/laravel_vite_errors/
叱られる
本当はこれで動く筈が。
Unable to locate file in Vite manifest: resources/js/flowbite.js.
だそうです。
生成された public/build/manifest.json を見に行く。
{
"resources/css/app.css": {
"file": "assets/app-xxxxxxx.css",
"isEntry": true,
"src": "resources/css/app.css"
},
"resources/js/app.js": {
"file": "assets/app-xxxxxxx.js",
"isEntry": true,
"src": "resources/js/app.js"
}
}
定石通りファイルはできている。
めちゃくちゃ資料を読み込んでも npm run build 以上のことは書いてない。
いないのはapp.jsとかではなくてresources/js/flowbite.js.。（ここ勘違いしていて時間を潰してしまった）
resourcesにはちゃんとflowbite.jsがいる。
ならば、とviewファイルの方のflowbiteを呼び出している箇所を削ってみたところ、
一部画面が表示されました。
resourcesにいるだけじゃダメで、public/build/manifest.jsonにいないといけない。
npm run buildの結果は以下のとおり。
% npm run build
> build
> vite build
vite v4.2.1 building for production...
✓ 2 modules transformed.
Generated an empty chunk: "app".
public/build/manifest.json 0.26 kB
public/build/assets/app-xxxxxxx.css 42.37 kB │ gzip: 7.47 kB
public/build/assets/app-xxxxxxx.js 0.00 kB │ gzip: 0.02 kB
✓ built in 1.71sそっちか
我流かも知れないけれど。
vite.config.jsを修正します。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js', 'resources/js/flowbite.js'],
refresh: true,
}),
],
});上記のように修正してbuild。
public/build/manifest.jsonに定義が追加され、ファイルが配置されました。
{
"resources/css/app.css": {
"file": "assets/app-xxxxxxx.css",
"isEntry": true,
"src": "resources/css/app.css"
},
"resources/js/app.js": {
"file": "assets/app-xxxxxxxx.js",
"isEntry": true,
"src": "resources/js/app.js"
},
"resources/js/flowbite.js": {
"file": "assets/flowbite-xxxxxxxx.js",
"isEntry": true,
"src": "resources/js/flowbite.js"
}
}そして画面が正しく表示されました。
これでいいのか
正直、これでいいのか疑問は残ります。
https://larainfo.com/blogs/install-flowbite-tailwind-css-with-laravel-9-vite
異国の資料を見る限り、vite.config.jsは触れていないもんなぁ。
しばし様子見をします。