Importar CSS
Contenido del curso
Importar CSS
Contenido del curso
Seba Cardoso
Róger Antonio Ordóñez Flores
Leandro Gavidia Santamaria
Mitchell Contreras
David Alejandro Cuastumal Bucheli
Hector Andres Erira Huertas
fabio andres zamora osorio
Antonio Rafael González Ferrer
Diana Martinez
Fidel Parabacuto
Juan David Reyes
Diana Martinez
Gaston Blanco
Diana Martinez
Diana Martinez
Kenneth Angulo L
Jefred Bedoya
Rubén Ernesto Aragón Gil
Incluse podes importar tu archivo .less sin instalar ningun plugin:
import('./styles/styles.less')
WOW! Cada vez me quedo más impresionado con Vite!
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
Podemos importar usando
@import './style.css';
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.
Hola ! Excelentes notas, pero la verdad no creo que se pueda volver algo tedioso ya que puedas limpiar cache con CTRL+F5
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
En windows el atajo para borrar la cache del navegador es presionar ctrl + shift + r
Entonces... ¿Si utilizamos un archivo css por componente debemos importarlos uno por uno al Style base?
No, puedes hacer todo tipo de imports, por ejemplo, importar un archivo css principal y que ese importe internamente a otros, puedes usar todo lo estándar.
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.
Esto es como las importaciones y el estilo de React si no estoy mal ?
Más bien como las importaciones de node.js o webpack, pero más completo.
Cual sistema de imports es el recomendado para usar en Vite ? importar los CSS de cada componente al Componente padre o que cada componente llame a su CSS. Imagino puede variar según el proyecto, pero en líneas generales.
No hay uno recomendado, Vite trata de ser lo más agnóstico posible a las tecnologías o arquitecturas, simplemente te da herramientas y espera que hagas lo que mejor te convenga.
No te impone una forma u otra, y eso es bueno porque entonces tú tomas las decisiones importantes.
¿Qué pasa si importo múltiples archivos CSS?
Cuando importas múltiples archivos CSS en diferentes módulos de JavaScript, Vite se encarga de orquestarlos de manera inteligente. Durante la fase de desarrollo, cada archivo importado se inyecta de forma independiente en el DOM, lo que permite actualizaciones ultrarrápidas sin recargar la página cuando modificas un solo archivo.
Sin embargo, la verdadera magia ocurre cuando construyes tu proyecto para producción. Vite agrupará (bundle) todos esos pequeños fragmentos de CSS dispersos y los combinará en un único archivo CSS minificado, o en unos pocos dependiendo de tu estrategia de code splitting. Esto significa que no tienes que preocuparte por hacer peticiones HTTP excesivas. Puedes organizar tu código en decenas de archivos pequeños para tu comodidad como desarrollador, sabiendo que Vite los empaquetará de la forma más eficiente posible para el navegador del usuario final.
Importar CSS en Vite es directo: basta con usar la sentencia import './archivo.css' en tu archivo JavaScript. Vite procesa el archivo, inyecta los estilos en el DOM y gestiona las dependencias automáticamente.
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.
