Vue

Utiliser le plugin Vue CLI

vue cli plugin purgecss

Installation

Si vous n'avez pas encore installé vue-cli 3, suivez d'abord les instructions d'installation ici : https://github.com/vuejs/vue-cli

Générez un projet en utilisant vue-cli 3.0 :

vue create my-app

Avant d'installer le plugin PurgeCSS, assurez-vous de valider ou de mettre de côté vos modifications au cas où vous auriez besoin de revenir en arrière.

Pour installer le plugin PurgeCSS, naviguez simplement vers le dossier de votre application et ajoutez PurgeCSS.

cd my-app

vue add @fullhuman/purgecss

Le plugin PurgeCSS générera un fichier postcss.config.js avec PurgeCSS configuré. Vous pouvez ensuite modifier les options de PurgeCSS.

Utilisation

Voici les options PurgeCSS définies par ce plugin :

{
  content: [ `./public/**/*.html`, `./src/**/*.vue` ],
  defaultExtractor (content) {
    const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
    return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
  },
  safelist: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/ ],
}