Почему post css плагин мешает не дает собрать main css в папке dist

Хочу подключить post css плагины в сборку webpack. Из за того, что я его подключил криво или не правильно, у меня не собирается main css в папке dist во время npm run dev и npm run build Или я чего-то не понимаю, в чем проблема, почему нет main css.
webpack.config.js

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const postcssPresetEnv = require('postcss-preset-env');
const postcss = require('postcss-nested')
// const postcss-scss = require('postcss-scss')

const isDev = process.env.NODE_ENV === 'development'
const isProd = !isDev

const optimization = () => {
    const config ={
        splitChunks: {
            chunks: 'all'
        }
    }
    if (isProd){
        config.minimizer = [
            new OptimizeCssAssetWebpackPlugin(),
            new TerserWebpackPlugin(),
        ]
    }
    return config
}
const filename = ext => isDev ? `[name].${ext}` : `[name].[hash].${ext}`
const cssLoaders = extra =>{
    const loaders = [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                hmr: isDev,
                reloadAll: true,
            },

        },
            'css-loader',
        {
            loader: 'postcss-loader', options: {
                ident: 'postcss',
                plugins: () => [
                    postcssPresetEnv({
                        filename: filename('css'),
                        stage: 1,
                        features: {
                            'nesting-rules': true
                        }
                    }),
                    postcss({

                    })



                ]
            }
        },

    ]
    if (extra){
        loaders.push(extra)
    }
    return loaders


}


module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: {
        main: ['@babel/polyfill', './index.js'],

    },
    output: {
        filename: filename('js'),
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ['.js', '.json', '.png'],
        alias: {
            '@': path.resolve(__dirname, 'src'),
            '@modules': path.resolve(__dirname, 'src/modules'),
        }
    },
    optimization: optimization(),
    devServer: {
        port: 4200,
        hot: false,
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './index.html',
            inject: 'body',
            minify: {
                collapseWhitespace: isProd,
            }
        }),
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, 'src/assets'),
                to: path.resolve(__dirname, 'dist/assets'),
            }
        ]),
        new MiniCssExtractPlugin({
            filename: filename('css'),
        }),

    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    { loader: 'postcss-loader', options: {
                            ident: 'postcss',
                            plugins: () => [
                                postcssPresetEnv({
                                    stage: 2
                                })
                            ]
                        } }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    { loader: 'postcss-loader', options: {
                            ident: 'postcss',
                            plugins: () => [
                                postcssPresetEnv({
                                    stage: 2
                                })
                            ]
                        } }
                ]
            },
            {
                test: /\.s[ac]ss$/,
                use: cssLoaders('sass-loader')
            },

            {
                test: /\.(png|jpg|svg|gif)$/,
                loader: 'file-loader',
                options: {
                    name: 'assets/[name].[ext]'
                },
            },
            {
                test: /\.(ttf|woff|woff2|eot)$/,
                use: ['file-loader']
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ],
                        plugins: [
                            '@babel/plugin-proposal-class-properties'
                        ]
                    }
                }
            }
        ]
    }
}

package.json

{
  "name": "my-config",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --mode development",
    "build": "cross-env NODE_ENV=production webpack --mode production",
    "watch": "cross-env NODE_ENV=development webpack --mode development --watch",
    "start": "cross-env NODE_ENV=development webpack-dev-server --mode development --open"
  },
  "browserslist": [
    "> 1%",
    "last 3 version"
  ],
  "author": "Semen Nemtirev <[email protected]>",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/polyfill": "^7.8.7",
    "@babel/preset-env": "^7.9.6",
    "autoprefixer": "^9.7.6",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "cross-env": "^7.0.2",
    "css-loader": "^3.5.3",
    "css-mqpacker": "^7.0.0",
    "cssnano": "^4.1.10",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "less": "^3.11.1",
    "less-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss": "^7.0.29",
    "postcss-cli": "^7.1.1",
    "postcss-extend-rule": "^3.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-nested": "^4.2.1",
    "postcss-nested-ancestors": "^2.0.0",
    "postcss-preset-env": "^6.7.0",
    "postcss-scss": "^2.0.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "terser-webpack-plugin": "^3.0.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "normalize.css": "^8.0.1"
  }
}

файловая система:

src/ 
    assets/
           fonts
    styles/
           components/components.css
           index.css
    index.html
    index.js