Esta es la solución más acertada que te podemos compartir, pero primero obsérvala detenidamente y valora si se puede adaptar a tu proyecto.
Al importar hojas de estilo CSS por FacesServlet mediante /javax.faces.resource/*. Mira lo generado elemento que apunta a la hoja de estilo en cuestión y lo entenderá.
Tienes que cambiar todo url() dependencias a utilizar #resource['library:location'] en lugar de. JSF lo sustituirá automáticamente con la ruta correcta. Dada la estructura de carpetas, debe reemplazar
.c2
background: url("/resources/images/smiley.jpg");
por
.c2
background: url("#resource['images/smiley.jpg']");
Suponiendo que el nombre de contexto de su aplicación web es playground y que tu FacesServlet está mapeado en *.xhtml, entonces lo anterior debería terminar en el archivo CSS devuelto de la siguiente manera
.c2
background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
Se debe tener en cuenta que la implementación de JSF determinará solo durante la primera solicitud en el archivo CSS si contiene expresiones EL. Si no es así, por eficiencia, ya no intentará evaluar EL el contenido del archivo CSS. Entonces, si agrega una expresión EL a un archivo CSS por primera vez, deberá reiniciar toda la aplicación para que JSF vuelva a verificar el archivo CSS.
En caso de que desee hacer referencia a un recurso de una biblioteca de componentes como PrimeFaces, entonces prefix el nombre de la biblioteca, separado con :. Por ejemplo, cuando utiliza el tema “Inicio” de PrimeFaces, que se identifica mediante primefaces-start
.c2
background: url("#resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']");
Esto se generará como
.c2
background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
Ver también:
- ¿Cómo hacer referencia a CSS/JS/recurso de imagen en la plantilla de Facelets?
- Cambiando JSF prefix la asignación de sufijos me obliga a volver a aplicar la asignación en imágenes de fondo CSS
No relacionado al problema concreto, la forma en que usas el library no es del todo correcto. Está destinado a ser el identificador/subcarpeta común de todos los recursos CSS/JS/image relacionados. El key La idea es poder cambiar todo el look’n’feel simplemente cambiando el library (que puede ser hecho por EL). Sin embargo, parece confiar en el defecto Biblioteca. En ese caso, podría simplemente omitir el library de tu #resource.
Ver también:
- ¿Para qué sirve la biblioteca de recursos JSF y cómo se debe usar?
Tienes la opción de estimular nuestra función mostrando un comentario y dejando una puntuación te lo agradecemos.