mi nombre es Fernando y he estado trabajando en un proyecto en el que tengo que importar 2 archivos css y cuando se hace clic en el botón, cambiar el tema del sitio web. El archivo del paquete se ejecuta manualmente y la página no se actualiza automáticamente. ¿Cómo puedo arreglarlo?

archivo principal.js:

 import 'core-js/stable'; import 'regenerator-runtime/runtime'; import './assets/css/dark.css'; import './assets/css/light.css'; import { FaEdit, FaWindowClose, FaPlus } from "react-icons/fa"; import Login from './modules/Login'; const login = new Login('.form-login'); const cadastro = new Login('.form-cadastro'); login.init(); cadastro.init();

index.ejs donde están los botones: (funciona bien para cambiar href de mi archivo principal)

 <div id="theme" class="btn-group center" role="group"> <button class="btn btn-outline-link" onclick="swapStyle('../../../frontend/assets/css/light.css')">Light Mode</button> <button class="btn btn-outline-link" onclick="swapStyle('../../../frontend/assets/css/dark.css')">Dark Mode</button> <script type="text/javascript"> function swapStyle(sheet) { document.getElementById('mystylesheet').href = sheet; } </script> </div>

Y finalmente, mi webpack.config:

 const path = require('path'); // CommonJS module.exports = { mode: 'production', entry: './frontend/main.js', output: { path: path.resolve(__dirname, 'public', 'assets', 'js'), filename: 'bundle.js' }, module: { rules: [{ exclude: /node_modules/, test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/env'] } } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }] }, devtool: 'source-map' };

¿Cómo puedo implementar estos cambios de tema en el momento en que se hace clic en el botón? Muchas gracias y si olvidé alguna información relevante, por favor dígame