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.

React no se actualiza cuando se cambia el archivo CSS.

17 Jul, 2023 Programación

Entonces, soy nuevo en React.
Quiero dar estilo a un texto simple y descubrí cómo usar estilos, pero cuando quiero cambiar algo en el CSS, tengo que reiniciar mi aplicación de React, lo cual siempre lleva 3 minutos.

Utilizo npm start para iniciar el servidor de React que se creó con create-react-app.

¿Cómo puedo hacer que React se actualice cuando se cambie el archivo CSS?

Tengo un index.js que se ve así:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './Frontend/App.js';
import './Frontend/style/main.css';

ReactDOM.render(<app></app>, document.getElementById('root'));

Y un App.js que se ve así:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './style/main.css';

class App extends Component {
    render() {
        var pageHeading = (
            <h1 classname="pageHeading">bosleeir.it</h1>);
        return pageHeading;
    }
}

export default App;
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que React se actualice cuando se modifique el archivo CSS, puedes usar webpack-dev-server. Esto te permitirá ver los cambios al instante en tu navegador sin tener que reiniciar tu aplicación de React cada vez.

    Aquí están los pasos para usar webpack-dev-server:

    1. Instala webpack-dev-server ejecutando el siguiente comando en tu terminal: 
      npm install webpack-dev-server --save-dev
    2. Abre tu package.json y agrega un nuevo script para ejecutar el servidor de desarrollo: 
      "scripts": {
 "start": "webpack-dev-server --mode development --open"
}
    3. Modifica tu index.js para usar require en lugar de import para el archivo CSS: 
      require('./Frontend/style/main.css');
    4. Ejecuta el servidor de desarrollo ejecutando el siguiente comando en tu terminal: 
      npm start

    Ahora puedes hacer cambios en tu archivo CSS y verlos al instante en tu navegador sin tener que reiniciar tu aplicación de React.

Comments are closed.