Convert Less to Css in Webpack

In my webpack app I need to convert less files into css files. The converted css files I need to put in a public folder. Here is what I have tried:

{
                test: /\.less$/,
                use: [{loader: 'file-loader', options: {name: "public/[name].css"}},{
                    loader: MiniCssExtractPlugin.loader,
                    
                }, 'css-loader', {loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true } } }]
            },

I tried converting the css-loader into plain css text using MiniCssExtractPlugin and store the file in a public folder on my app. The reason for this is because I need to access these css files in my index.html file to style a custom theme library.

Maybe Im using the file-loader wrong I am not sure :(