Cómo evitar errores de rutas relativas en Vite

El uso de rutas relativas puede causar errores al mover archivos o cambiar la estructura de carpetas. Para evitar estos problemas, es recomendable usar un alias para la carpeta src en tu proyecto Vite.

Paso a paso para configurar alias

1. Configura el alias en vite.config.js

   Abre tu archivo vite.config.js y agrega la siguiente configuración para el alias @:

   // ...existing code...
   import path from "path";
   
   export default defineConfig({
     // ...existing code...
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "src"),
       },
     },
   });
   

2. Usa el alias en tus imports

   Cambia tus imports de rutas relativas a absolutas usando el alias @.
   Ejemplo:

   import "@/estilos/fondos.scss";
   

3. Reemplaza rutas relativas en tus archivos

   Modifica los imports en tus archivos .jsx, .js, .scss, etc., para usar el alias @ en lugar de rutas relativas.

Ventajas de usar alias

• Evitas errores al mover archivos.
• El código es más legible y fácil de mantener.
• Menos problemas de rutas incorrectas en diferentes niveles de carpetas.

Recomendaciones adicionales

• Si usas VSCode, instala la extensión "Path Intellisense" y configura el alias en jsconfig.json o tsconfig.json para autocompletado.

• Asegúrate de tener instalado sass si usas archivos .scss:

  npm install sass
  

Resumen

Configura el alias @ en tu proyecto Vite y úsalo en todos tus imports para evitar errores de rutas relativas. Así tu código será más robusto y fácil de mantener.