Tip: PurgeCSS works perfectly with Quasar

[suleiman_as]

Hello Everyone,
I just want to share my results after so many failed attempts to integrate purgecss with webpack. I only managed to make it work after the build, so this is my idea:

• install purgecss globally

npm install -g purgecss

• add purgecss --config ./purgecss.config.js in the scripts after the build

"scripts": {
    "build": "quasar build && purgecss --config ./purgecss.config.js"
}

• make a purgecss.config.js file and just whitelist what I need

module.exports = {
  content: ["./dist/spa/js/*.js"],
  css: ["./dist/spa/css/*.css"],
  output: ["./dist/spa/css/"],
  fontFace: true,
  keyframes: true,
  variables: true,
  rejected: true,
  safelist: {
    standard: [/fixed-.*/, /absolute-.*/, /q-btn.*/, /justify-.*/]
  }
};

Thats it…

[dobbel]

@suleiman_as

So no more missing quasar component classes anymore when using purgecss ? What version of Quasar are you using Qv1 or the beta Qv2?

Just tested your setup in Qv1, it unfortunately does not work correctly, it removes to much and some components will not render correctly.

[suleiman_as]

@dobbel I’m using Qv1, sure it differs from project to another but if I find something missing I would just add it to the safelist.

[dobbel]

@suleiman_as

I would just add it to the safelist.

Yes that works. Not ideal but finally some reduced css size for Quasar apps. Good work!