¿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

El navegador se abrirá solo, con recarga en caliente y un entorno listo para trabajar.

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.