How to Use PurifyCSS in Laravel Mix?

Question

I want to use PurifyCSS in Laravel but I can't get it to work.

Stack

Laravel: 5.5.4

NPM: 6.0.0

Node.js: 8.10

Code

mix.styles([
    'resources/assets/css/panel/a.css',
    'resources/assets/css/panel/b.css',
    'resources/assets/css/panel/c.css',
    'resources/assets/css/panel/d.css',
], 'public/css/panel.css').options({
    purifyCss: {
        purifyOptions: {
            info: true,
            rejected: true,
            minify: true
        },
        paths: ['resources/views/admin-layout.blade.php'],
        verbose: true
    },
});

I searched on the internet but couldn't find anything. I want to strip unused CSS from all Blade pages. Even on this link, nobody answered with the correct answer. Even if PurifyCSS is first, it's not working.

Thanks for the help.

Answer 1

First install PurgeCSS.

npm install laravel-mix-purgecss --save-dev

Declaring the mix variable and setting your options is relatively simple.

const mix = require('laravel-mix');
require('laravel-mix-purgecss');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .purgeCss();

In this code, purgeCss() will remove unused CSS from your compiled CSS files. By default, it will scan your resources/views directory for Blade templates and your resources/js directory for JavaScript or Vue components.