Create an example of sass-loader & postcss-loader for Webpack v4 with mini-css-extract-plugin

[versedi]

I've been trying to implement the PurgeCSS webpack plugin while using sass-loader and postcss-loader. I've found the examples only for webpack V3:
https://github.com/FullHuman/purgecss-webpack-plugin/tree/master/examples/postcss-and-scss

https://github.com/webpack-contrib/extract-text-webpack-plugin

⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.

My suggested solution: Create an example configuration for webpack v4 with sass-loader and postcss-loader

[versedi]

I did managed to make it work but it doesn't seem to be purging anything. I'm on an old project so I'll try to create a minimal repository with which it would be reproducable.

I'm using Encore myself but the configuration is very similar:

Encore.addLoader({
    test: /\.scss$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                // you can specify a publicPath here
                // by default it uses publicPath in webpackOptions.output
                publicPath: '../',
                hmr: process.env.NODE_ENV === 'development',
            },
        },
        'css-loader?sourceMap!postcss-loader!sass-loader?sourceMap',
    ],
});
Encore.addPlugin(
    new PurgecssPlugin({
        // folders: ['resources/views/**/*', 'resources/assets/scss/'],
        paths: glob.sync([path.join(__dirname, 'resources/views/**/*.blade.php')]),
        extractors: [
            {
                extractor: class {
                    static extract(content) {
                        return content.match(/[A-z0-9-:\/]+/g) || [];
                    }
                },
                extensions: ['html', 'js', 'php', 'vue'],
            },
        ],
    }),
);

which would be equivalent in pure webpack config:

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // you can specify a publicPath here
                            // by default it uses publicPath in webpackOptions.output
                            publicPath: '../',
                            hmr: process.env.NODE_ENV === 'development',
                        },
                    },
                    'css-loader?sourceMap!postcss-loader!sass-loader?sourceMap',
                ],
            },
            {
                // folders: ['resources/views/**/*', 'resources/assets/scss/'],
                paths: glob.sync([path.join(__dirname, 'resources/views/**/*.blade.php')]),
                extractors: [
                    {
                        extractor: class {
                            static extract(content) {
                                return content.match(/[A-z0-9-:\/]+/g) || [];
                            }
                        },
                        extensions: ['html', 'js', 'php', 'vue'],
                    },
                ],
            }
        ]
    }
};

[versedi]

I must have been tired and somehow missed the example in main README.md - it would be convenient to add it to the main example folder too :)

My final configuration that works:

const path = require( 'path' );
const glob = require('glob');
const webpack = require( 'webpack' );
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PurgeCssPlugin = require("purgecss-webpack-plugin");

const PATHS = {
    src: path.join(__dirname, 'src')
}

module.exports = ( env, options ) => {
    return {
        entry: './src/assets/js/index.js',

        output: {
            path: path.resolve( __dirname, 'public' ),
            filename: 'index.js',
        },

        devtool: 'cheap-eval-source-map',

        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                // you can specify a publicPath here
                                // by default it uses publicPath in webpackOptions.output
                                publicPath: '../',
                                hmr: process.env.NODE_ENV === 'development',
                            },
                        },
                        'css-loader', 'sass-loader'
                    ],
                },
            ],
        },

        plugins: [
            new MiniCssExtractPlugin({
                filename: 'style.css',
                chunkFilename: '[id].css'
            }),
            new PurgeCssPlugin({
                paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
            }),
        ],

    }
};