Unable to configure less-loader with Electron React Boilerplate

I am using Ant Design with Electron React Boilerplate and need to load less file as global styles to customize its theme colors as mentioned here. I have configured less-loader in webpack.config.renderer.dev.babel.js and webpack.config.renderer.prod.babel.js as

{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader',
    }, {
      loader: 'less-loader',
      options: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#e6315a',
            'link-color': '#e6315a',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    }],
  },

and this is my less file app.global.less

@import '~ag-grid-community/dist/styles/ag-grid.css';
@import '~ag-grid-community/dist/styles/ag-theme-alpine.css';
@import '~antd/dist/antd.less';

when I try to run in development using yarn dev, it runs good with customize theme colors but when I try to run in production using yarn start, it shows blank screen with this error

you can just replace loader: 'style-loader', with loader: MiniCssExtractPlugin.loader in the webpack.config.renderer.prod.babel.js

the global.less global less

other .less files less file not the global

Hope this can help you