¿Sabes ese momento en el que tienes una idea y solo quieres empezar a construirla ya?
Bueno, a mí me pasó hace poco. Tenía un rato libre, una idea clara y ganas de probar algo visual.
Pensé: “Va, algo sencillo con Vanilla JS y Sass”.
Lo típico… abrí el editor, instalé dependencias, empecé a configurar cosas… y a la media hora ya estaba buscando errores en la consola en vez de escribir código. Ahí fue cuando paré y pensé: esto tiene que ser más fácil.
Me acordé de Vite —lo había usado una vez, de pasada— y decidí intentarlo. Literal: npm create vite, plantilla vanilla, y en menos de cinco minutos ya tenía todo corriendo. Le sumé Sass y… por fin pude dedicarme a crear en vez de pelearme con la configuración.
Y como sé que no soy la única a la que le pasa esto, armé esta guía paso a paso para que montes tu propio entorno moderno, limpio y funcional con Vanilla JS, Sass y Vite.
¿Por qué Vite?
Vite usa módulos ES nativos, recarga instantánea y una configuración mínima. Si trabajas con JS puro, Vite te da lo justo y necesario para ir al grano, sin sacrificar rendimiento.
Paso a paso para crear tu proyecto
Creamos nuevo proyecto utilizando el siguiente comando.
npm create vite
Selecciona la plantilla vanilla.
Entra en el proyecto e instala paquete y sus dependencias.
cd nombre-proyecto
npm install
Cómo integrar Sass sin complicarte
Para trabajar con sass es necesario instalar un módulo extra.
npm add -D sass
Si abrimos el fichero package.json podremos comprobar que ya tenemos instalada nuestra nueva dependencia.
Cambia style.css por style.scss y comienza a usar variables, mixins, y funciones:
$color-principal: #1e88e5;
h1 {
color: $color-principal;
}
Organiza tus estilos en /base, /components, /layouts para mantener claridad.
Ejecuta y disfruta
npm run dev
Esta combinación de herramientas puede parecer simple, pero bien usada es una base sólida y profesional para crear sitios modernos, rápidos y mantenibles. Porque a veces, menos sí es más.
🚀 En resumen: cómo crear un frontend moderno con Vite
🛠️ Qué aprenderás: Esta guía paso a paso te enseñará a construir un frontend moderno con Vite usando tecnologías simples como Vanilla JS y Sass.
🔗 Herramientas principales:
💡 ¿Por qué elegir Vite? Porque es rápido, sencillo y perfecto para prototipos o proyectos minimalistas.
📚 Si te interesa mejorar tu flujo de trabajo, te recomiendo este artículo sobre atajos para Visual Studio Code.