🤔 Resumen
En proyectos a gran escala, mantener estilos consistentes entre múltiples aplicaciones es crucial. Aquí tienes dos enfoques para gestionar estilos compartidos:
- 📦 Crear una librería de estilos compartida como un paquete npm.
- 🔗 Importar estilos directamente desde un directorio centralizado dentro del monorepo.
📦 1. Crear una Librería de Estilos con npm
Resumen: Este enfoque consiste en crear una librería de estilos dedicada y publicarla como un paquete npm. Los estilos se pueden importar después en cualquier proyecto que los necesite.
Implementación: Por ejemplo, si estás trabajando con estilos de temas personalizados claro/oscuro para PrimeReact, puedes crear tus estilos en una librería y exportarlos usando un archivo index.js así:
module.exports = {
theme: require('./style/themes/my-theme/theme.scss'),
};
Después de publicar el paquete, puedes instalarlo en tus proyectos con:
npm i my-theme
Luego, simplemente importa los estilos en tu punto de entrada JavaScript principal:
import 'my-theme';
Ventajas: Control de versiones centralizado de estilos. Fácil de actualizar y distribuir entre múltiples proyectos.
Desventajas: Requiere publicar y versionar con cada cambio.
🔗 2. Importación Directa desde un Directorio Centralizado
Resumen: Si estás usando una configuración de monorepo, puedes almacenar tus estilos en un directorio central e importarlos directamente en cada proyecto.
Implementación: Coloca tus estilos en una carpeta a nivel raíz, en paralelo a tus apps, e impórtalos en tus proyectos:
import '../style/themes/my-theme/theme.scss';
Ventajas: No hace falta publicar ni gestionar versiones. Acceso inmediato a los últimos estilos sin pasos adicionales.
Desventajas: Riesgo de cambios accidentales que rompan funcionalidad si los estilos se actualizan. Necesitas tener una estructura de monorepo; no funciona si los proyectos están en repositorios separados.
❓ Qué Elegir
- Usa un paquete npm si quieres tener control de versiones estricto o no tienes todos tus proyectos en la misma carpeta.
- Usa importación directa desde un directorio centralizado si prefieres una solución más simple y tu estructura de código lo permite.