Laravel-Mix PurifyCss选项失效问题求助

Hey there, I’ve dealt with this exact silent failure issue after upgrading Laravel Mix before—super frustrating when something just stops working without so much as an error message. Let’s break down the most common fixes and checks to get PurifyCSS working again:

1. Verify You’re Using the Correct Integration for Your Mix Version #

Laravel Mix changed how it handles PurifyCSS across versions, so the old mix.purify() method might not work anymore depending on which version you upgraded to:

• First, fix your dependencies:
  If you’re on Mix 6+, you’ll need to install the standalone webpack plugin instead of relying on old wrapper packages. Run this:

  yarn add purifycss-webpack purify-css glob --dev
  

  (We add glob because we need it to scan your template files efficiently.)

• Update your webpack.mix.js configuration:
  Replace any old mix.purify() calls with the explicit webpack plugin setup. Make sure you’re targeting all your blade templates and JS files (since dynamic classes might live in JS/Vue components):

  const mix = require('laravel-mix');
  const glob = require('glob');
  const path = require('path');
  const PurifyCSSPlugin = require('purifycss-webpack');
  
  mix.js('resources/js/app.js', 'public/js')
     .sass('resources/sass/app.scss', 'public/css');
  
  // Only enable PurifyCSS in production
  if (mix.inProduction()) {
      mix.webpackConfig({
          plugins: [
              new PurifyCSSPlugin({
                  paths: glob.sync([
                      // Scan all blade templates
                      path.join(__dirname, 'resources/views/**/*.blade.php'),
                      // Scan JS files for dynamic classes (e.g., Vue components)
                      path.join(__dirname, 'resources/js/**/*.js')
                  ]),
                  verbose: true, // Enable this to see debug logs
                  minimize: true
              })
          ]
      });
  }
  

  The key here is explicitly defining the paths PurifyCSS needs to scan—old versions might have inferred these automatically, but newer versions don’t.

2. Double-Check Your Template File Paths #

If PurifyCSS can’t find your blade files, it won’t know which CSS selectors are actually in use, so it’ll just leave all your CSS intact (no errors, just no cleanup).

• Test if your path glob is working by adding a console log to webpack.mix.js:

  console.log("Scanning files:", glob.sync([path.join(__dirname, 'resources/views/**/*.blade.php')]));
  

  Run yarn run production and check the console—you should see a list of your blade files here. If not, adjust the glob pattern to match your project’s folder structure (e.g., if your views are in resources/templates instead of resources/views).

3. Ensure Dependency Version Compatibility #

Mismatched versions between Laravel Mix and PurifyCSS packages are a common culprit for silent failures:

• For Laravel Mix 6.x: Use purifycss-webpack@^4.0.0 and purify-css@^1.2.5
• For Laravel Mix 5.x or earlier: You can use the laravel-mix-purifycss wrapper package instead of the standalone plugin

Check your package.json to confirm versions, and run yarn upgrade purifycss-webpack purify-css to get compatible versions if needed.

4. Test with a Minimal Setup #

Isolate the issue to rule out other factors:

1. Create a simple test blade file with a unique class:

   <div class="purify-test-class">Hello PurifyCSS</div>
   

2. Add some unused CSS to your SCSS:

   .purify-test-class { color: blue; }
   .totally-unused-class { color: red; }
   

3. Run yarn run production and check the compiled CSS. If .totally-unused-class is gone, PurifyCSS is working—but your main project might have dynamic classes (e.g., classes added via JS, or Vue’s :class bindings) that PurifyCSS can’t detect.

For dynamic classes, add them to the PurifyCSS whitelist:

new PurifyCSSPlugin({
    paths: [...],
    whitelist: ['dynamic-class-from-js'],
    whitelistPatterns: [/^vue-/] // Use regex for prefixes
})

5. Enable Debug Logs #

The verbose: true option we added earlier will print detailed logs about what PurifyCSS is doing. Run yarn run production and look for output like:

PurifyCSS processed X files, Y selectors retained, Z selectors removed.

This will tell you exactly if PurifyCSS is scanning your files and acting on them—if it says it retained all selectors, your path glob is probably wrong.

内容的提问来源于stack exchange，提问作者SpyrosJevan