Adiós webpack, Vite se ha ganado mi corazón
Introducción
¿Qué es Vite?
Historia del Ecosistema de JavaScript
Características de Vite
Setup inicial
¿Cómo instalar Vite?
Boilerplate de Vite
Estilos CSS
Importar CSS
Pre-procesadores CSS
CSS Modules
Archivos estáticos
Importar imágenes
Importar JSON
Importación global
Configuración
Uso con TypeScript
Vite Config
Construir para producción
Variables de entorno y modos
Sitios multi-página
Construir librerías
Frameworks
Soporte para React
Soporte para Vue
Cierre del curso
Despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Pre-procesadores CSS
7/19Recursos
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 24
Preguntas 4
Ordenar por:
El nivel de abstracción que nos ofrece VIte a los programadores es sorprendente.
Ya entiendo porque lo describen de 3cer nivel
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 😃
Usar la sintaxis de los procesadores sin ninguna configuracion es la magia de Vite.
Este curso debí tomarlo antes de webpack, sin embargo, la ventaja es que ya se usar los dos.
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
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!
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.
Al intentar importar un archivo .sass falla, se necesita agregar la devDependecies para sass al proyecto
npm add -D sass
Listo!!! Me caso definitivamente con Vite
Para las interesados: Curso Nuevo - Curso de Fundamentos de Sass: Crea tu Primera Landing Page
Lo mismo para el uso de Less
npm add -D less
vite eres mi nuevo amigo
No olviden instalar como dependencia de desarrollo tanto `sass` como `less` para que vite lea sus archivos
`yarn add -D sass` -> Instala sass
`yarn add -D less` -> Instala less
Me pidió instalar sass pero no tuve que configurar nada
Wow, sorprendido con la facilidad de integración de estas herramientas.
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 🤯
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?