How to remove unused CSS in sage 10 bootstrap theme

sage
14

Hi @alkesh,

Have you tried with PurgeCSS?

Add Laravel Mix PurgeCSS to your project:

yarn add laravel-mix-purgecss purgecss-with-wordpress

and in your webpack.mix.js add:

require('laravel-mix-purgecss');
const purgeCssWithWordPress = require('purgecss-with-wordpress');

after

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

Also, you need to add PurgeCSS rules to your project:

mix.sass('resources/assets/styles/app.scss', 'styles')
  .purgeCss({
    whitelist: [
      ...purgeCssWithWordPress.whitelist,
    ],
    whitelistPatterns: [
      ...purgeCssWithWordPress.whitelistPatterns,
    ],
  });

Here is the documentation how to whitelist your classes: