I recently tweaked my webpack modules in my React/Electron.js project to compile less files using less-loader, css-loader, and MiniCssExtractPlugin.loader instead of the style-loader since there is no window defined during part of the compilation, but now the font awesome icons are showing up as boxes and I'm not sure why that is.

The font awesome icons showed up fine when I had style-loader instead of MiniCssExtractPlugin.loader, but I only made this change for loading .less files, and not anything else, so I'm confused why this was affected.

I've tried adding .fa, .far, .fas { font-family: FontAwesome !important; } to my index.less file as suggested here, but this didn't help at all.

I also tried adding in the font-awesome-loader, but this seems to have a dependency of sass-loader@*, which I'm not using.

What's causing Font Awesome to load with style-loader but not MiniCssExtractPlugin.loader? I've included my webpack modules and my font-awesome import below:

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';
...