Utilizar preprocesadores de CSS, como por ejemplo Sass o Less, en Vite, es demasiado fácil, literalmente no tenemos que hacer nada para empezar a usar estas tecnologías.

Empleando preprocesadores CSS en Vite

Para emplear preprocesadores CSS no tenemos que hacer ninguna configuración o instalar alguna dependencia. Vite ya integra estas tecnologías, se encarga de reconocerlas y procesarlas.

Ejemplo Sass

Creemos un archivo que tenga por nombre ejemplo con la extensión de Sass, ejemplo.sass. Ahora, escribamos algunos estilos como los siguientes:

fullscreen
h1 {
    color: red;
}

Para que los cambios se apliquen debemos importar nuestro archivo .sass en los estilos principales.

fullscreen
@import './ejemplo.sass';

Una vez guardés los cambios verás como el título de nuestra página cambia de color.

Ejemplo less

Creemos otro archivo que se llame demo.less e insertemos algunos estilos.

fullscreen
p {
    background-color: white;
}

Además, no se te olvide importar el archivo en los estilos principales.

@import './demo.less';.

Y ahora nuestro texto tiene un fondo de color diferente. Como ves utilizar preprocesadores con Vite es muy fácil.

Contribución creada por: Jofay Zhan Segura