Filament•16mo ago

Filament styling missing after upgrade

I'm trying to upgrade to v3. I followed the steps. I created a new v3 project for comparison. I'm seeing http://localhost/css/filament/filament/app.css?v=3.0.16.0 being fetched by the browser in the new project, but not in the upgraded one. I can't find the place where this is included / where I should add something. Any idea?

Solution:

Yes. That should be in the Theme instructions, too.

Jump to solution

20 Replies

Dennis Koch•16mo ago

Did you run artisan filament:upgrade?

JohnOP•16mo ago

Yes It added a buckload of assets to public

Dennis Koch•16mo ago

That should publish them I think.

JohnOP•16mo ago

I do have the file, but it isn't fetched by the brower.

Dennis Koch•16mo ago

And app.css it not included?

JohnOP•16mo ago

Correct

Dennis Koch•16mo ago

Hm. Check your actual Filament version. artisan about

JohnOP•16mo ago

  Filament .........................................................................................................................................  
  Packages ......................................................................................... filament, forms, notifications, support, tables  
  Version .................................................................................................................................. v3.0.25  
  Views ................................................................................................................. PUBLISHED: filament, forms

  Filament .........................................................................................................................................  
  Packages ......................................................................................... filament, forms, notifications, support, tables  
  Version .................................................................................................................................. v3.0.25  
  Views ................................................................................................................. PUBLISHED: filament, forms

Dennis Koch•16mo ago

Do you have a custom theme registered?

JohnOP•16mo ago

Was just about to type.. I have done some styling changes. I have some custom vite.config.js:

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament.css',
                'resources/css/non-admin.css',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
                'app/Tables/Columns/**',
                'app/Filament/**',
                'app/**',
            ],
        }),
    ],
});

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament.css',
                'resources/css/non-admin.css',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
                'app/Tables/Columns/**',
                'app/Filament/**',
                'app/**',
            ],
        }),
    ],
});

If I put this in my custom filament.css it works:

@import '../../public/css/filament/filament/app.css';

@import '../../public/css/filament/filament/app.css';

Is this the way to go? Hmm I'm still missing my custom styling...

Solution

Dennis Koch•16mo ago

Yes. That should be in the Theme instructions, too.

Dennis Koch•16mo ago

What custom styling did you apply? And where?

Ridlafalah•16mo ago

sorry to interupt, can you help me on this post https://discord.com/channels/883083792112300104/1141728803043946497 🙏🏻

JohnOP•16mo ago

Since I added that @import the Filament styling is back. Only difference is with how it's fetched from the browser: In new testing project: http://localhost/css/filament/filament/app.css?v=3.0.16.0 In v2 upgrade project: http://[::1]:5173/resources/css/filament.css (which contains the @import '../../public/css/filament/filament/app.css'; and my custom styling) I see that the class naming is completely different. It does work, I need to refactor. I'll look into v3 Theme instructions. Thanks for your time!

Dennis Koch•16mo ago

First one is probably a built production file. Second one runs through Vite.

(which contains the @import '../../public/css/filament/filament/app.css'; and my custom styling)

Then it isn't compiled with Vite. You are probably missing a postcss config. Best to create a new theme a make:filament-theme and copy over your changes.

JohnOP•16mo ago

Yea the first one is from a fresh project for comparison. Well.. my custom styling is synced by the browser immediately. But you mean changes in the included app.css? But.. wait.. is that one subject to change?

Dennis Koch•16mo ago

Oh, I thought it's still not working? If everything works fine, then no need to change.

JohnOP•16mo ago

It looked weird to me with the :5173, but that's just hot reloading right? Yea, my custom styling is loading right away. Ah, I think I should explain, the source file contains the @import, but in the browser I see the full source of that file.

Dennis Koch•16mo ago

Yes. That the Vite server Good. Then everything should be fine?

JohnOP•16mo ago

Yea think so. Will still check out v3 Theme docs and that artisan command to be sure 😅 Thanks again! 🙏

Gaming

Programming

Filament styling missing after upgrade