No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
16H
18M
49S
Curso de Vite.js

Curso de Vite.js

Diana Mart铆nez

Diana Mart铆nez

Pre-procesadores CSS

7/19
Recursos

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

Aportes 22

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Adi贸s webpack, Vite se ha ganado mi coraz贸n

El nivel de abstracci贸n que nos ofrece VIte a los programadores es sorprendente.
Ya entiendo porque lo describen de 3cer nivel

Usar la sintaxis de los procesadores sin ninguna configuracion es la magia de Vite.

Es importante saber que debes tener instalado el modulo de node correspondiente. Intente usar un archivo scss tal cual la clase y me fallo por eso mismo. El profesor se salta un punto bastante importante 馃槂

Este curso deb铆 tomarlo antes de webpack, sin embargo, la ventaja es que ya se usar los dos.

Lo mejor de Vite es que con unas pocas l铆neas de c贸digo en la configuraci贸n puedes extender la propia funcionalidad de los preprocesadores Sass y Less, configurando, por ejemplo, una clase para el nodo principal o alguna secci贸n de la p谩gina en espec铆fico 馃憤馃徏

Normalmente en SASS se usa el @use para poder importar archivos sin embargo algo que he notado trabajando con Vite es que obliga a usar el @import, si estoy mal espero alguien pueda corregirme.

Ojo, si necesitamos importar el archivo de estilos en la extensi贸n del preprocesador por ejemplo .scss dentro de main.js entonces all铆 debemos instalar el transpilador del preprocesador en el entorno de desarrollo para que funcione, de todas formas vite no los indica!

Listo!!! Me caso definitivamente con Vite

Al intentar importar un archivo .sass falla, se necesita agregar la devDependecies para sass al proyecto

npm add -D sass

vite eres mi nuevo amigo

No me funcionaba lo del sass, instale la dependencia: npm install -d sass y camb茅 la extensi贸n del archivo de .sass a .scss. Con esto funcion贸 Ok.

Para que funciona sass, se agrega la dependencia

npm install -D sass

y el archivo ejemplo.sass debe quedar sin llaves ni punto y coma, as铆:

h1
    color: red

Wow, sorprendido con la facilidad de integraci贸n de estas herramientas.

Lo mismo para el uso de Less

npm add -D less

Para las interesados: Curso Nuevo - Curso de Fundamentos de Sass: Crea tu Primera Landing Page

Me encanta

Es impresionante, sigo la ruta de vue y la facilidad de desarrollar es muy severa.

Realmente es muy r谩pido en la compilaci贸n鈥 una maravilla

馃挌 Vite 馃挌

Yo a webpack, "no quiero verte nunca m谩s"馃槏

Vite es maravilloso. Ni siquiera hace falta compilar los preprocessors 馃く