es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Módulos CSS: Problemas en producción con Create React App

23 Jul, 2023 Programación

Estoy utilizando módulos CSS en un proyecto create-react-app (React V17.0.2 / React-Scripts V4.0.3). Todo parece estar bien en local, pero los estilos se rompen en producción (alojado en netlify).

Creo que el problema es que los módulos CSS no reconocen las variables que he definido globalmente en archivos CSS normales. Aquí hay un ejemplo de la configuración que he creado:

Archivos index.css importados en el archivo index.js de nivel superior en mi proyecto de React:

@import '../Global/ColorScheme.css';

body {
  // estilos del body
}

a {
  // estilos globales de las etiquetas 'a'
}

ColorScheme.css:

:root {
    --green: #00b890;
    --pink: #ef767a;
    --brown: #554348;
    --orange: #fb8f67;
}

Luego, algunos módulos CSS consumen los estilos globales de ColorScheme.css..

SomeFile.module.css

.greenBox {
    background-color: var(--green);
    height: 500px;
    width: 500px;
    border: 1px solid #333;
}

Ejemplo de componente

import React from 'react';
import styles from '../somePath/SomeFile.module.css';

export default function MyComponent() {
    return <div classname="{styles.greenBox}"></div>;
}

Cuando lo ejecuto localmente, obtengo una caja verde con una altura y anchura de 500px y un borde negro sólido de 1px alrededor. Todo funciona como se esperaba. Sin embargo, la versión de producción muestra una caja de 500px por 500px con un borde negro de 1px, pero sin color de fondo. Supongo que hay una desconexión cuando un módulo CSS utiliza una variable definida en un archivo CSS normal. ¿Tal vez algo relacionado con la forma en que Webpack compila un create-react-app para la versión de producción?

¿Alguien tiene alguna idea de por qué podría estar sucediendo esto y alguna forma de solucionarlo? He visto ejemplos de variables globales en módulos CSS, pero estoy tratando de evitar importar los estilos globales en cada módulo individual.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para que los módulos de CSS reconozcan las variables globales en la compilación de producción de React

    Si estás teniendo problemas con los módulos de CSS que no reconocen las variables que has definido globalmente en archivos CSS sencillos, a pesar de que el proyecto funciona bien de manera local, es posible que la siguiente solución te sea útil.

    Descripción del problema

    En un proyecto create-react-app con React V17.0.2 y React-scripts V4.0.3, estás utilizando módulos de CSS donde las variables globales están definidas en un archivo ColorScheme.css, que luego se importa en el archivo index.css, que es importado a nivel superior en el archivo index.js. Los módulos de CSS están consumiendo los estilos globales definidos en ColorScheme.css. Todo funciona bien de manera local, pero los estilos se rompen en producción cuando se hospedan en Netlify.

    Solución

    El problema es que webpack, utilizado por create-react-app para la compilación de producción, no reconoce las variables globales definidas en ColorScheme.css cuando se utilizan en los módulos de CSS. Una forma de resolver este problema sería usar Propiedades Personalizadas de CSS o Variables de CSS en lugar de variables globales. Sin embargo, esto podría requerir un cambio significativo en la estructura de código existente y llevar mucho tiempo.

    Una solución alternativa sería utilizar un complemento creado por la comunidad llamado react-app-rewire-alias. Este complemento crea un alias para el archivo ColorScheme.css, que luego se importa en el archivo SomeFile.module.css. Esto permite que webpack reconozca las variables globales y las aplique a los módulos de CSS.

    Aquí están los pasos para configurar react-app-rewire-alias:

    1. Instala el paquete react-app-rewire-alias: 
      npm install --save-dev react-app-rewire-alias
    2. Crea el archivo config-overrides.js en el directorio raíz de tu aplicación.

    3. Agrega el siguiente código en config-overrides.js:

      const {alias} = require('react-app-rewire-alias');

module.exports = function override(config) {
 alias({
   ['GlobalStyles']: './src/Global',
 })(config);

 return config;
}

      GlobalStyles es el nombre del alias que estamos asignando a ./src/Global, donde se encuentra ColorScheme.css.

      Además, asegúrate de actualizar la ruta en la declaración @import en el archivo index.css a @import 'GlobalStyles/ColorScheme.css';.

    4. Actualiza la declaración de import en SomeFile.module.css a:

      @import '~GlobalStyles/ColorScheme.css';

      Esto importa el archivo ColorScheme.css utilizando el nombre del alias.

    5. Ejecuta la aplicación utilizando el siguiente comando:

      NODE_PATH=. react-scripts build

      NODE_PATH es necesario para que webpack conozca el alias creado por react-app-rewire-alias.

    6. Implementa la compilación de producción en Netlify y prueba si funciona correctamente.

    Conclusión

    El uso de react-app-rewire-alias nos permite utilizar variables globales definidas en archivos CSS sencillos con módulos de CSS en un proyecto create-react-app sin realizar cambios significativos en la estructura de código existente. Esto podría ser una solución rápida y efectiva al problema que ocurre cuando los estilos se rompen en producción al hospedarse en Netlify.

Comments are closed.