Laravel-mix: How to extract all css or style in single css file with mini-css-extract-plugin

[essivision]

• Laravel Mix Version: v4.0.16
• Node Version: v10.15.2
• NPM Version: v6.4.1
• OS:

Description:

I want to extract all css and style of components in single css file. Because of that I want to use mini-css-extract-plugin. But when I change laravel mix webpackConfig to this:

let mix = require('laravel-mix');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

mix
    .autoload({
        jquery: ['$', 'window.jQuery','window.$'],
        quill: ['window.Quill','Quill']
    })
    .webpackConfig({
        optimization: {
            splitChunks: {
                cacheGroups: {
                    styles: {
                        name: 'styles',
                        test: /\.css$/,
                        chunks: 'all',
                        enforce: true,
                    },
                },
            },
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader'],
                },
            ],
        },
        plugins: [
            // new BundleAnalyzerPlugin({
            //     analyzerMode: 'server',
            //     generateStatsFile: true,
            //     statsOptions: { source: false }
            // }),
            new MiniCssExtractPlugin({
                filename: '[name].css',
            }),
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
        ],
    })
    .js('resources/assets/js/app.js', 'public/js')
    .sourceMaps()
    .version();

Error Me:

Error: Rule can only have one result source (provided use and loaders) in {
  "test": {},
  "loaders": [
    "style-loader",
    {
      "loader": "css-loader",
      "options": {
        "importLoaders": 1
      }
    },
    {
      "loader": "postcss-loader",
      "options": {
        "plugins": []
      }
    }
  ],
  "use": [
    "style-loader",
    "C:\\wamp64\\www\\upport\\node_modules\\mini-css-extract-plugin\\dist\\loader.js",
    {
      "loader": "css-loader",
      "options": {
        "importLoaders": 1
      }
    },
    {
      "loader": "postcss-loader",
      "options": {
        "plugins": []
      }
    }
  ]
}

What should I do to solve problem? Do you have any solution to extract all style css to single file?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[havennow]

@essivision I am having the exact same problem, how did you manage to solve this?

[KhaledPendleton]

I'm not sure if this is still an issue but change use: [MiniCssExtractPlugin.loader, 'css-loader'] to loaders: [MiniCssExtractPlugin.loader, 'css-loader']