Filament v3: Actualizar el custom CSS desde v2

Raul Lopez -

Hoy he estado actualizando un panel de Filament que tenía para un proyecto y me he encontrado con algunos problemillas. Prácticamente todo fue automático gracias a la extensión que han creado, pero alguna cosilla manual sí que tuve que hacer.

En particular, registro un Vite Theme de la siguiente forma en un Service Provider:

Filament::serving(function () {
	Filament::registerViteTheme('resources/css/app.css');
});

Al actualizar a v3 lanza el siguiente error:

ENOENT: no such file or directory, open '../../vendor/filament/filament/resources/css/app.css'

El problema viene de que en mi fichero app.css estoy cargando los estilos de Filament de una forma antigua. En lugar de eso, lo que hay que hacer es crear un tema:

php artisan make:filament-theme

Una vez creado el tema, solo hay que seguir los pasos que muestra el helper de Filament para registrarlo en el panel:

  1. Añadir un nuevo elemento al array input del fichero vite.config.js: resources/css/filament/admin/theme.css
  2. Luego, registrar el tema en el AdminPanelProvider (o como se llame tu fichero en la carpeta app/Providers/Filament/ usando ->viteTheme('resources/css/filament/admin/theme.css')
  3. Por último, ejecuta npm run build para compilar el tema