Proyecto Vanilla JS + Sass con Vite

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.

Nuevo proyecto con Vite

Creamos nuevo proyecto utilizando el siguiente comando.

				
					npm create vite

Lenguajes de desarrollo

Escogemos vanilla como lenguaje de programación.

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.

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.

Finalmente arrancamos el proyecto.

				
					npm run dev

Nuevas/ publicaciones