es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Está rota la anotación CssImport de Vaadin?

Hemos utilizado Vaadin 14.5 y la anotación @CssImport para CSS personalizado funcionaba bien.
Ahora queremos actualizar, pero desde la versión 14.6, la anotación @CssImport ya no carga el CSS personalizado.

Tenemos la siguiente estructura de Maven:

- app-1, -2... : las aplicaciones que tienen código y estilo comunes

<ul>
<li>shared : todo el código y estilo que compartimos entre nuestras aplicaciones
|
+- src/main/java/our/package/AbstractUI.java
|

<ul>
<li>src/main/resources/META-INF/resources/frontend/
|
+- css
|<br>
+-styles.css
|

<ul>
<li>vaadin-vertical-layout.css</li>
</ul></li>
</ul></li>
</ul>

En el artefacto compartido tenemos varios archivos CSS personalizados para los componentes de Vaadin, donde abordamos el CSS que debe ajustarse en los shadow DOMs:

vaadin-vertical-layout.css
/* Página */
:host(.Page) {
    left: 64px;
    padding-top: 2em;
    position: absolute;
    transition: all 0.5s ease;
    width: calc(100% - 64px);
}

Y luego cargamos todo este CSS personalizado en la clase AbstractUI, que es la superclase de todas las demás clases UI:

@StyleSheet("./css/styles.css")
...
@CssImport(value = "./css/vaadin-vertical-layout.css", themeFor = "vaadin-vertical-layout")
@Theme(value = Material.class, variant = Material.LIGHT)
public abstract class AbstractUI extends VerticalLayout {

Las aplicaciones entonces no tienen que preocuparse por todas las anotaciones y simplemente extienden AbstractUI y el CSS se carga y se agrega al CSS existente en el shadow DOM.

Esto funcionaba bien con Vaadin 14 hasta la versión 14.5.5, pero después de la versión 14.6.0 el CSS personalizado ya no se carga. El vaadin-maven-plugin verifica la existencia de los archivos CSS al construir el frontend (y se detiene con un error si no están presentes), pero en la aplicación el CSS simplemente no se carga.
Para aclarar: la anotación @StyleSheet sigue funcionando, por lo que ese CSS se carga.

¿Es esto un error en Vaadin o nos falta alguna información crítica?

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Es posible que este problema esté relacionado con un error en Vaadin 14.6, pero también es posible que falte alguna información crítica. Una cosa a verificar es si los archivos CSS personalizados todavía se están incluyendo en el resultado final de la compilación. Otra cosa a verificar es si hay mensajes de error en la consola o en los archivos de registro que puedan indicar cuál podría ser el problema. También es posible que haya habido cambios en la forma en que se carga el CSS personalizado en Vaadin 14.6, por lo que puede valer la pena revisar la documentación y las notas de la versión para ver si se han realizado cambios en esta área.

Comments are closed.