How to dynamically disable PurgeCSS?

Question

I'm using PurgeCSS alongside Vite and I would like to disable PurgeCSS for some stylesheets. It is possible thanks to comments /* purgecss ignore */but I'm importing some CSS from libs directly in chunked & lazy loaded JS files like :

fancybox_controller.js

import 'fancybox/dist/scss/jquery.fancybox.scss'
import 'fancybox/dist/js/jquery.fancybox'

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  open() {
    $.fancybox({
      padding: 4,
      href: $(this.element).data('large'),
      helpers: {
        overlay: {
          locked: false
        }
      }
    })
  }
}

Any way to disable PurgeCSS in that case ?

You want to purge the purgeCSS? Very meta. A side note is if you get into a fight with a css element you can always add !important to the end of it and force it to over ride the previously loaded one. Such as color:black !important; — easleyfixed, Feb 06 '23 at 17:50

score 0 · Answer 1 · answered Feb 06 '23 at 17:47

you can import your css that you ned inside an external css file like app.css

/*! purgecss start ignore */
@import "/public/css/bootstrap-5.2.3.min.css";
@import "/public/css/fontawsome.min.css";
/*! purgecss end ignore */

and import app.css inside your js app.js file then put your js file inside content to be ignored

cssPurge({
   content: ['/public/js/app.js']
)}

/* purgecss ignore */ some times not working for me then iam using /*! purgecss start ignore */ & /*! purgecss end ignore */ and it works

How to dynamically disable PurgeCSS?

1 Answers1