Vite es una herramienta moderna basada en Rollup con la que podemos desarrollar proyectos de frontend de forma mucho más ágil que con otras alternativas como create-react-app, webpack o vue-cli.
Vite permite crear proyectos, proporciona un servidor de desarrollo y prepara el código para producción de forma optimizada.
Para el ejemplo crearemos un proyecto para trabajar con vanilla sin el uso de ningún framework e incluiremos el módulo de sass para trabajar con los estilos.
![](http://martagonzalez.dev/wp-content/uploads/2023/01/proyecto-con-vite-vanillajs-y-sass-linkedin.jpg)
Nuevo proyecto con Vite
Creamos nuevo proyecto utilizando el siguiente comando.
npm create vite
Lenguajes de desarrollo
Escogemos vanilla como lenguaje de programación.
![](http://martagonzalez.dev/wp-content/uploads/2023/01/proyecto-vite-vanilla-sass-01.jpg)
Entramos en el proyecto e instalamos paquete y sus dependencias.
cd nombre-proyecto
npm install
Módulo de sass
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.
![](http://martagonzalez.dev/wp-content/uploads/2023/01/proyecto-vite-vanilla-sass-02.jpg)
Ya no necesitaremos el fichero style con extensión css por lo que podemos renombrarlo con la extensión scss e importarlo con esta misma extensión.
![](http://martagonzalez.dev/wp-content/uploads/2023/01/proyecto-vite-vanilla-sass-03.jpg)
Finalmente arrancamos el proyecto.
npm run dev