Missing styling after upgrading to v3
I upgraded to the new version, but i am missing all the styling.
Solution:Jump to solution
Seems like i need to use
@php artisan filament:upgrade to publish the CSS/JS files.5 Replies
Did you run
npm run dev?
or build ?Solution
Seems like i need to use
@php artisan filament:upgrade to publish the CSS/JS files.I've also had styling issues but have resolved them so I'll share what I did on here in case it helps others.
1. I started on a ~3-4 week old version of the admin demo which have heavily modified.
2. Ran the automated upgrade. This was pretty good but missed a bunch of areas:
- a number of method signatures I'd overridden were wrong - e.g. overridden
getRelationManagers in resource pages.
- once that was fixed, the styling wasn't working
About 50% of the styling was missing - blue outlines on everything, no button styles etc.
1. I ran the artisan command suggested above here: php artisan filament:upgrade
2. Cleared view cache: php artisan view:clear
2. Tried to rebuild css with vite but npm run build was throwing errors:
From there the big help was just loading the demo source to compare vs my repo. I had to make the following changes:
1. My repo still had a resources/css/filament.css - delete this
2. My resources/css/app.css differed from the demo - namely it needed a: @import '../../vendor/filament/forms/dist/index.css'; at line 1.
3. My vite.config.js was wrong - attempting to load filament.css. I updated this and mirrored the refresh settings while I was at it from the demo.
4. Now I could run npm run build - ran successfully
5. 1 final error: my AppServiceProvider::boot method was registering filament.css still with Filament::registerViteTheme('resources/css/filament.css'); - I removed that Filament::serving section.
Job done - loading fine & looks great 👌It’s in the installation guide and in #✅┊rules for a reason.
This solved my issue as well, you are a god! Might be wise to put it in the docs!:)