Purgecss not working in my Laravel App

[devzakir]

I am working on a project where I am using separate assets for frontend and backend.

I am trying to use purge css for frontend with specific folders and views. I don't think it's working. Can someone look into my configuration and tell me what to do?

mix.scripts([
    'public/website/js/jquery-3.4.1.min.js',
    'public/website/js/popper.min.js',
    'public/website/js/bootstrap.min.js',
    'public/website/js/slick.min.js',
    'public/website/js/modernizr-webp.js',
    'public/website/js/main.js',
    'public/website/js/jssocials.min.js',
], 'public/website/js/script.js');

mix.styles([
    'public/website/css/fontawesome.min.css',
    'public/website/css/bootstrap.min.css',
    'public/website/css/slick.css',
    'public/website/css/slick-theme.css',
    'public/website/css/jssocials.css',
    'public/website/css/jssocials-theme-flat.css',
    'public/website/css/style.css',
], 'public/website/css/main.css').purgeCss({
    enabled: true,
    paths: () => glob.sync([
        path.join(__dirname, 'resources/views/website/**/*.blade.php'),
        path.join(__dirname, 'resources/views/website/*.blade.php'),
        path.join(__dirname, 'resources/views/includes/website.blade.php'),
        path.join(__dirname, 'resources/views/auth/**/*.blade.php'),
        path.join(__dirname, 'resources/views/auth/*.blade.php'),
        path.join(__dirname, 'public/website/js/script.js'),
    ]),
});

[sowrensen]

May be you should include public/website/css/main.css in paths.

[avvertix]

I experienced the same issue on the version 5.0.0-RC1, going back to version 4.1.0 solved the problem.

[jeytii]

@avvertix The newest version actually does work. You just have to add the enabled: true option.

[aurawindsurfing]

Reverting back to 4.1.0 did the trick. Latest one didi not work on fresh laravel install with tailwind

[colinmac17]

Just adding a comment to confirm:

Reverting to version 4.1, plus adding enabled: true is how I got it to work.

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .options({ processCssUrls: false, postCss: [ tailwindcss('./tailwind.config.js') ], }) .purgeCss({ enabled: true, })

[innocenzi]

I'm having the same issue. I didn't test without it, but I'm pretty sure it comes from the fact that I use mix.postCss with the third option.

Manually adding this to my Mix doesn't work, so I think it's an issue with Mix and not this plugin.

mix.options({
  postCss: [
    // ...mix.config.postCss,
    require('@fullhuman/postcss-purgecss')(),
  ],
});

Downgrading to 4.1 works, but I'd rather just manually include PurgeCSS to my PostCSS config at this point.

[snapey]

Also had to revert to 4.1

[Caroga]

On a tailwind project too. Using:

"laravel-mix": "^5.0.0",
"laravel-mix-purgecss": "^5.0.0-rc.1",

Adding enabled: true to the config makes things happen.

[andrew-ireland]

I'm using enabled: mix.inProduction(), so I also downgraded to 4.1 — this worked for me

    "laravel-mix": "^5.0.4",
    "laravel-mix-purgecss": "^4.1",

[sebastiandedeyne]

^5.0.0-rc.1 isn't stable yet. I'm kind of surprised Yarn/npm is pulling that in by default. Sorry about that! Gonna try to push out the 5.0 release soon.

Until then, please keep using 4.1.0.

[Caroga]

@sebastiandedeyne no worries there. I'm already super glad I found out why it wasn't working before and it is now. I'll be downgrading this later today/tomorrow. thank you!

[repat]

@devzakir did you get this working?

v4.1.0 (but also tried 5.0.0-rc3) - just downgraded because it was recommended here Laravel Mix 5.0

1. With 4.1.0 I had to use styles() like @devzakir, neither combine(), nor css() worked in even processing the file(s)

2. With 4.1.0, only sass() worked to execute the purgeCss() function. I noticed that because I ended up trying this with a test scss file and got an error message saying that I didn't have glob-all installed. So it seems to just bypass it otherwise. With 5.0.0-rc3 though, it works with styles()

3. With 5.0.0-rc3, it creates the file but I see no drop in size, no matter which files I include with paths. Hard to imagine I use all of Bootstrap 😛. Any idea where I could look for the errors of why that might be?

One thing that's special about my setup is that the _nodemodules folder is a symlink to a _nodemodules folder one level above, as I have many projects with the same package.json and don't want a bunch of massive node_modules folders cluttering up my hard drive. For laravel mix to work, we created a webpack.config.js with this content:

require('./node_modules/laravel-mix/src/index');
Mix.paths.setRootPath(path.resolve(__dirname));
module.exports = require('laravel-mix/setup/webpack.config.js');

(Got the idea from here: https://www.artansoft.com/2017/11/laravel-mix-con-node-modules-en-symlink/)

Could our own webpack.config.js or the _nodemodules influence the way this plugin works?

"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=webpack.config.js",

const purgeCssOptions = {
        enabled: true,
        paths: () => glob.sync([
            path.join(__dirname, 'resources/views/**/*.blade.php'),
            path.join(__dirname, 'resources/themes/_common/js/**/*.*')
        ]),
}

Thanks!

[mathieuh]

@repat Did you find a solution? It seems that purgess doesn't work on mix.styles(), I mean it create the file properly but it doesn't delete any unused classes. Had to use mix.sass() to make it work.

[repat]

@mathieuh I didn't, I gave up as this isn't a priority item for us now. Whenever I'll have a lot of time I will look into this again ;)

[Daniel4Digital]

5.0 doesn't work for me either. Needed to use 4.2

Im using Laravel + vue:

mix.js('resources/assets/js/app.js', 'public/js/app.js')
  .extract()
  .styles('resources/assets/css/admin.css', 'public/css/admin.css')
  .options({
    extractVueStyles: '[name].css',
    processCssUrls: true,
    postCss: [require('autoprefixer')],
  })
  .purgeCss({
    enabled: mix.inProduction()
  })
  .mergeManifest();