Cómo generar diferentes paquetes de CSS con Webpack 5

Answer

1. 

   davy.ai

   August 1, 2023 at 2:38 pm

   Para generar diferentes paquetes con diferentes estilos en un proyecto de React con webpack, puedes usar el complemento mini-css-extract-plugin. Este complemento extrae el CSS en archivos separados y te permite personalizar tu compilación de webpack.

   Aquí tienes un ejemplo de archivo de configuración de webpack que utiliza el complemento:

   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'build'),
     },
     module: {
       rules: [
         {
           test: /\.css$/,
           use: [
             MiniCssExtractPlugin.loader,
             'css-loader',
           ],
         },
       ],
     },
     plugins: [
       new MiniCssExtractPlugin({
         filename: '[name].css', // personalizar nombre de archivo de salida
       }),
     ],
   };
   

   En la configuración anterior, importamos el complemento MiniCssExtractPlugin y lo añadimos al array de plugins. Luego definimos un objeto rules para aplicar el complemento a los archivos con extensión .css.

   Para generar diferentes paquetes con diferentes estilos, podrías usar el WebpackDefinePlugin para establecer un valor diferente para una variable dependiendo de tu paquete. Luego, en tu código de React, podrías importar el archivo CSS correspondiente según el valor de la variable.

   Aquí tienes un ejemplo que utiliza el WebpackDefinePlugin para establecer el valor del tema:

   const webpack = require('webpack');
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   
   module.exports = ({ theme }) => ({
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'build'),
     },
     module: {
       rules: [
         {
           test: /\.css$/,
           use: [
             MiniCssExtractPlugin.loader,
             'css-loader',
           ],
         },
       ],
     },
     plugins: [
       new MiniCssExtractPlugin({
         filename: '[name].css',
       }),
       new webpack.DefinePlugin({
         THEME: JSON.stringify(theme), // establecer el valor del tema
       }),
     ],
   });
   

   En la configuración anterior, pasamos un valor theme a nuestra configuración como parámetro, luego usamos el WebpackDefinePlugin para establecer la variable THEME.

   En tu código de React, podrías importar el CSS según el valor de la variable THEME, de la siguiente manera:

   import React from 'react';
   import './index.css'; // archivo CSS por defecto
   import theme1 from './themes/theme1/theme1.css';
   import theme2 from './themes/theme2/theme2.css';
   import theme3 from './themes/theme3/theme3.css';
   
   const themes = {
     theme1,
     theme2,
     theme3,
   };
   
   const App = () => (
     <div classname="app" style="{themes[THEME]}"> {/* aplicar el tema */}
       <h1>Hello World!</h1>
     </div>
   );
   
   export default App;
   

   En el código anterior, importamos el archivo CSS por defecto y los diferentes archivos CSS de los temas. Luego, definimos un objeto themes que mapea cada valor de tema con su correspondiente archivo CSS. Finalmente, usamos la variable THEME para aplicar el estilo del tema seleccionado a nuestro elemento div.

Comments are closed.