Pre-procesadores CSS

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:

h1 { color: red; }

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

@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.

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