Skip to main content

Empaquetado de recursos

Para no servir decenas de archivos sueltos, Crono combina y minifica los recursos estáticos (Sass/CSS y JavaScript) antes de entregarlos al navegador. El objetivo es reducir peticiones y peso en producción, manteniendo la comodidad de trabajar con archivos separados en desarrollo.

SCSS: un único CSS por tema​

El SCSS de un tema no se sirve archivo por archivo: el punto de entrada tema.scss importa todos sus parciales y se compila a un solo CSS (ver Estilos de tema). El resultado se cachea en proceso y en disco, y en producción pasa por el autoprefijador. Por eso un cambio en cualquier parcial requiere reiniciar para recompilar.

// tema.scss reúne todo el tema en una sola salida
@import '/.app/temavars.scss';   // variables del tema (BD)
@import 'variables';
@import '/lib/bs5/scss/bootstrap-cabecera';
@import 'botones';
@import 'menu';
// ...

Recursos de módulos​

Cada módulo puede aportar sus propios estilos en su carpeta wwwroot/ (por convención, un admin.scss para el backend y un publico.scss para el frontend, más parciales como _base.scss). Esos estilos se recogen junto con los del tema durante la compilación, de modo que un módulo puede extender la apariencia sin editar el tema. Al igual que con el tema, no hay recarga en caliente del SCSS de un módulo: hay que reiniciar (ver Solución de problemas).

Referenciar recursos en las vistas​

Las bibliotecas compartidas se referencian por rutas virtuales estables que el sistema resuelve al compilar o servir, por ejemplo /lib/bs5/... para Bootstrap 5 y /compartido/... para funciones, mixins y variables comunes de Crono. Estas rutas se usan tanto desde el SCSS (@import "/lib/bs5/scss/functions";) como al enlazar hojas y scripts en el layout.

Desarrollo vs. producción​

  • En producción, los recursos se combinan, minifican y prefijan; conviene mantener el empaquetado y el caché activados para máximo rendimiento.
  • En desarrollo, el empaquetado y el caché pueden estorbar al inspeccionar el código; se pueden desactivar desde la configuración de temas del backend para ver los archivos sin combinar y facilitar la depuración.
info

Como el CSS final se cachea, recuerda que tras tocar SCSS de un tema o de un módulo hay que reiniciar la aplicación (y, si hiciera falta, limpiar la carpeta de caché de compilación) para regenerar el paquete.