 --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 453 453' style='enable-background:new 0 0 453 453;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M226.5,0C101.6,0,0,101.6,0,226.5S101.6,453,226.5,453S453,351.4,453,226.5S351.4,0,226.5,0z M32.8,225.9 c0-106.5,86.6-193.1,193.1-193.1S419,119.4,419,225.9S332.4,419,225.9,419C119.4,419,32.8,332.4,32.8,225.9z'/%3E%3Cg%3E%3Cpolygon class='st0' points='289.8,375.6 247.8,272.5 229.6,312.6 255.2,375.6 '/%3E%3Cpolygon class='st0' points='165.4,154.8 211.2,267.6 229.5,227.4 165.2,69.5 26.2,376 65.1,375.9 '/%3E%3Cpolygon class='st0' points='308.4,69.5 290.7,110.6 379.2,342.4 392.2,376 426.8,376 '/%3E%3C/g%3E%3C/svg%3E%0A)
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