Importar CSS

Importar archivos con Vite es muy simple, por ejemplo para los archivos de estilos solo debemos de usar la palabra @import y a continuación la ruta del archivo dentro de comillas. Para los archivos en JS sería muy parecido, solo que se remplaza @import por import.

Manejo de estilos en Vite

Antes de ver el tema de importaciones debemos crear un archivo de estilos.

// base.css body { background-color: #006a47; }

Importando estilos

Si ejecutamos nuestro proyecto veremos una pagina con fondo negro, para que este cambie al color que definimos previamente, debemos de importar base.css en style.css.

@import './base.css';

Si te das cuenta estamos empleando @import y a continuación la ruta de los estilos, ocasionando un fondo verde para nuestra página.

Analizando los estilos

Si abrimos las herramientas de desarrollo en el navegador y nos dirigimos a la parte de network encontraremos algo bien curioso, como puedes ver se cargó más de un style.css, esto es porque una vez se guardan los cambios, los archivos que cambiaron son nuevamente solicitados.

Ahora, en la sección de sources también abra más de un style.css, porque cada cambio que se hace en un archivo creara una copia y la almacenara en caché, para que esté disponible de un modo más rápido.

Si deseas eliminar estas copias puedes reiniciar el navegador o ir a application, oprimir el botón clear site data, reiniciar la página y ver como se trae la última versión de tu código.

Optimizaciones de Vite

Si vamos al último archivo style.css, veremos que contiene el código hecho en base.css, esto sucede porque Vite une archivos suficientemente pequeños con otros, para tratarlos como solo uno. Si los archivos son demasiado grandes, va a tratarlos por separado.

Contribución creada por: Jofay Zhan Segura