Filament v3: Actualizar el custom CSS desde v2
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:
- Añadir un nuevo elemento al array
input
del ficherovite.config.js
:resources/css/filament/admin/theme.css
- 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')
- Por último, ejecuta
npm run build
para compilar el tema