No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Curso de Vite.js

Curso de Vite.js

Diana Martínez

Diana Martínez

Importar CSS

6/19
Recursos

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.

image.png

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.

vite-clear-site-data.png

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

Aportes 6

Preguntas 3

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Incluse podes importar tu archivo .less sin instalar ningun plugin:

import('./styles/styles.less')

Integrar Sass tambi√©n es supersimple: creo el archivo .scss y solo lo importo en el main.js y funciona perfectamente. Al igual como es un archivo peque√Īo, lo une en un √ļnico archivo CSS.

Importar CSS

  1. Podemos importar usando

    @import './style.css';
    
  2. Como los archivos est√°n quedando en el cache del servidor es posible que al inspeccionar podamos ver ambas versiones, pero como queda asociado por la variable de timestamp los cambios se pueden ver y no genera conflictos.

  1. Cuando tenemos imports entre archivos.
    1. Vite puede inyectar un archivo dentro de otro y subir uno solo al navegador
    2. Vite determina que uno de ellos es muy grande y los envía separados
  2. Si queremos borrar los archivos anteriores debemos forzar el limpiado de la cache (Creo que esto puede ser bastante tedioso)

Vite me parece bastante r√°pido ojala en el curso veamos como limpiar el cache de forma autom√°tica, ya que hacerlo manual no me parece practico

Vite utiliza PostCSS para procesar archivos de hojas de estilo. PostCSS es una herramienta de procesamiento de CSS que le permite utilizar diferentes plugins para transformar y optimizar sus archivos de hojas de estilo.

Interesante dato que agarra los archivos que son peque√Īos y los une con otro igual de peque√Īos para correr los files m√°s r√°pidos.