デプロイしたら、ヘッダーのロゴが大きくなってしまった

Last updated at 2024-06-16Posted at 2024-06-16

現状

デプロイを行ったら、ロゴ画像が大きくなってしまった。
お気に入りボタンや、マイページリンクなども隠れてしまった。

デプロイ前

デプロイ後

デベロッパーツールでの確認

<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タグを削除するように設定

まとめ

根本的な解決とはなりませんでしたが、デプロイ前と同じ状態まで戻すことができてよかったです。
今はスクール修了まで時間がないので、落ち着いたら振り返りたいと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up