Recientemente modifiqué mis módulos webpack en mi proyecto React/Electron.js para compilar menos archivos usando less-loader, css-loader y MiniCssExtractPlugin.loader en lugar del style-loader ya que no hay una ventana definida durante parte de la compilación, pero ahora los iconos de fuentes impresionantes se muestran como cuadros y no estoy seguro de por qué.

Los increíbles íconos de fuentes aparecían bien cuando tenía un cargador de estilos en lugar de MiniCssExtractPlugin.loader, pero solo hice este cambio para cargar archivos .less y nada más, así que no estoy seguro de por qué esto se vio afectado.

Intenté agregar .fa, .far, .fas { font-family: FontAwesome !important; } a mi archivo index.less como se sugiere aquí , pero esto no ayudó en absoluto.

También intenté agregar font-awesome-loader , pero parece tener una dependencia de sass-loader@* , que no estoy usando.

¿Qué está causando que Font Awesome se cargue con el cargador de estilo pero no con MiniCssExtractPlugin.loader? He incluido mis módulos de paquete web y mi importación de fuentes impresionantes a continuación:

 module.exports = { module: {[ { test: /\.node$/, use: 'node-loader', }, { test: /\.(m?js|node)$/, parser: {amd: false}, use: { loader: '@marshallofsound/webpack-asset-relocator-loader', options: { outputAssetBase: 'native_modules', }, }, }, { test: /\.tsx?$/, exclude: /(node_modules|\.webpack)/, use: { loader: 'ts-loader', options: { transpileOnly: true, }, }, }, { test: /\.css$/, use: [{loader: 'style-loader'}, {loader: 'css-loader'}], }, { test: /\.(woff(2)?|ttf|eot|svg|jpg|png|ico|icns)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'file-loader', options: { name: '[path][name].[ext]', publicPath: '..', }, }, ], }, { test: /\.less$/, use: [MiniCssExtractPlugin.loader, {loader: 'css-loader'}, {loader: 'less-loader'}], exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.(config|variables|overrides)$/], }, ]}, plugins: [ new ForkTsCheckerWebpackPlugin(), new MiniCssExtractPlugin(), ], resolve: { extensions: ['.js', '.ts', '.jsx', '.tsx', '.less', '.css'], }, };

 /* index.tsx */ import './index.less'; import '@fortawesome/fontawesome-free/css/all.css'; ...