izayoi256's avatar

Generated CSS filename does not match

I'm trying to deploy a Livewire application with Deployer.

The application works fine at the releases/1. From the next release, the generated CSS filename will change every time, while the filename that browsers attempt to load won't change. As a result, the generated css file won't be loaded successfully, while the generated js file is fine.

Why this happens, and how can I fix this?

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,
        }),
    ],
});

deployer.php

after('deploy:update_code', 'npm:install');
after('npm:install', 'npm:build');

resources/css/app.css

@import "@fortawesome/fontawesome-free/css/all.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
    overflow-y: scroll;
}

Blade template

@vite(['resources/css/app.css', 'resources/js/app.js'])
$ ls releases/1/public/build/assets/*
releases/1/public/build/assets/app-BG5hnYRl.css              releases/1/public/build/assets/fa-regular-400-DgEfZSYE.woff2
releases/1/public/build/assets/app-CEsE5a7F.js               releases/1/public/build/assets/fa-solid-900-BV3CbEM2.ttf
releases/1/public/build/assets/fa-brands-400-Dur5g48u.ttf    releases/1/public/build/assets/fa-solid-900-DOQJEhcS.woff2
releases/1/public/build/assets/fa-brands-400-O7nZalfM.woff2  releases/1/public/build/assets/fa-v4compatibility-B9MWI-E6.ttf
releases/1/public/build/assets/fa-regular-400-Bf3rG5Nx.ttf   releases/1/public/build/assets/fa-v4compatibility-BX8XWJtE.woff2
$ ls releases/2/public/build/assets/*
releases/2/public/build/assets/app-CEsE5a7F.js               releases/2/public/build/assets/fa-regular-400-DgEfZSYE.woff2
releases/2/public/build/assets/app-Du8Z81sn.css              releases/2/public/build/assets/fa-solid-900-BV3CbEM2.ttf
releases/2/public/build/assets/fa-brands-400-Dur5g48u.ttf    releases/2/public/build/assets/fa-solid-900-DOQJEhcS.woff2
releases/2/public/build/assets/fa-brands-400-O7nZalfM.woff2  releases/2/public/build/assets/fa-v4compatibility-B9MWI-E6.ttf
releases/2/public/build/assets/fa-regular-400-Bf3rG5Nx.ttf   releases/2/public/build/assets/fa-v4compatibility-BX8XWJtE.woff2
$ ls releases/3/public/build/assets/*
releases/3/public/build/assets/app-BG5hnYRl.css              releases/3/public/build/assets/fa-regular-400-DgEfZSYE.woff2
releases/3/public/build/assets/app-CEsE5a7F.js               releases/3/public/build/assets/fa-solid-900-BV3CbEM2.ttf
releases/3/public/build/assets/fa-brands-400-Dur5g48u.ttf    releases/3/public/build/assets/fa-solid-900-DOQJEhcS.woff2
releases/3/public/build/assets/fa-brands-400-O7nZalfM.woff2  releases/3/public/build/assets/fa-v4compatibility-B9MWI-E6.ttf
releases/3/public/build/assets/fa-regular-400-Bf3rG5Nx.ttf   releases/3/public/build/assets/fa-v4compatibility-BX8XWJtE.woff2
0 likes
0 replies

Please or to participate in this conversation.