Webpack bundled styles are not being extracted to css files

Question

getting a little beat up here by webpack and setting it up. For the most part I think I have everything set up correctly but I am not sure what I am missing that will enable my styles to be extracted into .css files rather than being bundled into .js files. Any help would be greatly appreciated.

Here is what I have so far:

webpack.config.js

const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
    watchOptions: {
    ignored: ['files/**/*.js', 'node_modules']
},

optimization: {
    minimizer: [
        new UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: true
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.optimize\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
                preset: ['default', { discardComments: { removeAll: true } }],
            },
            cssProcessorOptions: {
                sourcemap: true,
                map: { inline: false }
            },
            canPrint: true
        })
    ],
    splitChunks: {
        chunks: 'all'
    }
},

module: {
    rules: [
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        },
        {
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader", // compiles Sass to CSS, using Node Sass by default
            ]
        }
    ]
},

plugins: [
    new BrowserSyncPlugin(
        {
            notify: false,
            host: 'localhost',
            port: 9000,
            proxy: 'http://student-report-gen.com:8888/'
        },
        {
            reload: true
        }
    ),
    new webpack.WatchIgnorePlugin([
        path.join(__dirname, "node_modules")
    ]),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
    }),
    new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
    }),
    new CleanWebpackPlugin(['dist'])
],

entry: {
    main: [
        './js/src/main.js'
    ]
},

output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

In my package.json I have the following scripts:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode=production --optimize-minimize",
  "dev": "webpack --watch --info-verbosity verbose --mode=development"
}

When I run build or dev I get the same results no extracted css files.

Answer 1

try

        {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader", // translates CSS into CommonJS
                "sass-loader", // compiles Sass to CSS, using Node Sass by default
            ]
        }