現状
デプロイを行ったら、ロゴ画像が大きくなってしまった。
お気に入りボタンや、マイページリンクなども隠れてしまった。
デプロイ前
デプロイ後
デベロッパーツールでの確認
<link rel="stylesheet" href="https://nagoyameshi-hoshi-b940707078bf.herokuapp.com/build/assets/app.css">
というコードがheadタグ内に記入されており、これを無効にすればデプロイ前と同じ状態になる
なぜ出てしまうのか
Viteが生成したJavaScriptファイルがCSSを含んでいて、そのCSSがスタイルを上書きしている可能性がある
やってみたこと
-
スタイルを変更する
<img src="{{ asset('img/logo.jpg') }}" height="40"> から <img src="{{ asset('img/logo.jpg') }}" height="40px"> に変更結果
ロゴは小さくなりましたが、右側のお気に入りボタンやマイページは表示されませんでした。
-
Viteの設定を変更する（ダメでした）
内容
Viteの設定ファイル（vite.config.js）を調整して、特定の出力形式やプリロード設定を変更することができます。
-
rollupOptionsを使って不要な出力を防ぐ
Rollupのオプションを使って、プリロードリンクが生成されないように設定します。
出力されるファイルの名前や場所を指定し、プリロードリンクが生成されないようにします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, }), ], build: { rollupOptions: { output: { manualChunks: undefined, entryFileNames: 'assets/[name].js', chunkFileNames: 'assets/[name].js', assetFileNames: 'assets/[name].[ext]' } } } }); -
プリロードリンクを無効にする
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, }), ], build: { modulePreload: { polyfill: false } } });
どうやっても
<link rel="stylesheet" href="https://nagoyameshi-hoshi-b940707078bf.herokuapp.com/build/assets/app.css">
が出てしまう
- HTMLで強制的に削除する
-
HTMLファイルの
<head>セクションに<script>タグを追加する。これにより、ページがロードされた後に指定の<link>タグを削除する<script> document.addEventListener('DOMContentLoaded', function () { const links = document.getElementsByTagName('link'); for (let i = 0; i < links.length; i++) { if (links[i].rel === 'stylesheet' && links[i].href === 'https://app-domain/build/assets/app.css') { links[i].parentNode.removeChild(links[i]); } } }); </script>relが
stylesheetかつ、hrefがhttps://app-domain/build/assets/app.cssのlinkタグを削除するように設定
-
まとめ
根本的な解決とはなりませんでしたが、デプロイ前と同じ状態まで戻すことができてよかったです。
今はスクール修了まで時間がないので、落ち着いたら振り返りたいと思います。