Styling languages
Sus estilos llegan a la página como CSS, pero no tiene que escribirlos como CSS. webforJ carga una hoja de estilos que usted autoriza, compila una desde un preprocesador como Sass o Less, o genera una desde Tailwind, y el resultado estiliza sus vistas de la misma manera, independientemente de su origen. Los tokens de DWC, propiedades personalizadas de CSS, y partes de sombra cubiertos en el resto de esta sección se aplican dentro de cualquiera de ellos.
CSS Plano
Una hoja de estilos que usted escribe no necesita construcción. Adjúntela a un componente o a la aplicación con @StyleSheet. Cuando ya está ejecutando el empaquetador de frontend, puede en su lugar vincular un archivo .css a una clase con @BundleEntry, lo que lo carga como estilos para esa vista.
Sass y Less
Para escribir sus estilos en Sass o Less, con variables, anidamiento y funciones, autorice el origen y deje que el empaquetador de frontend lo compile a CSS. El compilador es una extensión que se activa cuando hay un origen de su tipo presente, así que autorizar un archivo .scss, .sass o .less es la única señal que necesita. Vincule el origen a una clase de la misma manera que vincula una hoja de estilos:
@Route("/styled")
@BundleEntry("styles/view.scss")
public class StyledView extends Composite<FlexLayout> {
// construir la vista
}
La extensión compila view.scss a CSS y lo carga para la vista. Consulte SCSS y Sass y Less para obtener la estructura de archivos, rutas de carga y opciones que cada uno acepta.
Tailwind
Tailwind genera una hoja de estilos a partir de los nombres de clases de utilidades que utilizan sus vistas, en lugar de a partir de un archivo que usted autoriza. Active la extensión y luego agregue utilidades como nombres de clases sin nada que importar. webforJ omite el reinicio base de Tailwind para que no interfiera con el estilo que sus componentes ya llevan, y una utilidad llega al elemento en el que la coloca, no al interior de un componente. Consulte Extensión Tailwind para ver cómo genera y delimita su hoja de estilos, y dónde se aplican y no se aplican las clases de utilidad.
Otro lenguaje
El compilador para cada lenguaje es una extensión del empaquetador, y el modelo es abierto. Para autorizar sus estilos en un lenguaje para el cual webforJ no envía compilador, escriba una pequeña extensión que contribuya con ese compilador, bajo el mismo contrato que utilizan Sass y Less. Consulte Escribiendo su propia extensión.