Pourquoi ne puis-je pas mettre à jour mes fichiers CSS via purgecss ?

Question

J'implémente une mini bibliothèque CSS en utilisant SASS et je souhaite la purger, actuellement j'utilise purgecss et je n'ai aucun problème avec cela mais un problème est lorsque j'ajoute une classe de la bibliothèque CSS à mon html , cette classe particulière ne sera pas incluse dans mon fichier de purge, je dois purger à nouveau le fichier CSS de ma bibliothèque CSS pour inclure cette classe spécifique, mais j'ai besoin de purgecss pour surveiller mon fichier CSS et ajouter la classe lors de son ajout à mon projet, et je n'ai pas besoin d'effacer à nouveau les fichiers CSS, des idées ?

Answer 1

Pour inclure dynamiquement des classes d'une bibliothèque CSS sans avoir à purger à nouveau manuellement les fichiers CSS, vous pouvez utiliser PurgeCSS en conjonction avec le fichier de configuration complémentaire de PurgeCSS pour surveiller les fichiers CSS et inclure des classes spécifiques.

La méthode de réglage est la suivante :

1. Créer un fichier de configuration PurgeCSS : créez d'abord un fichier de configuration distinct pour PurgeCSS, nommons-le purgecss.config.js. Ce fichier spécifiera les fichiers à nettoyer et toute autre option de configuration.

// purgecss.config.js

module.exports = {
  content: ['index.html'], // Specify your HTML files here
  css: ['path/to/your/css/library.css'], // Path to your CSS library file
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [], // Default extractor, modify if needed
  safelist: ['class-to-include'], // Add classes that should always be included here
};

2. Configurer le processus de construction : vous devez configurer le processus de construction pour surveiller les fichiers CSS et déclencher PurgeCSS lorsque des modifications se produisent. Vous pouvez utiliser des outils comme Webpack, Gulp ou Grunt pour accomplir cette tâche. Voici un exemple utilisant Webpack :

// webpack.config.js

const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const path = require('path');

module.exports = {
  // ... other webpack configuration options

  plugins: [
    new PurgecssPlugin({
      paths: () => glob.sync(path.resolve(__dirname, 'index.html')), // Specify your HTML files here
      safelist: { deep: [/^class-to-include$/] }, // Add classes that should always be included here
    }),
  ],
};

3. Démarrez le processus de construction : désormais, chaque fois que vous ajoutez une classe d'une bibliothèque CSS à un fichier HTML, le processus de construction surveille automatiquement les modifications et déclenche PurgeCSS pour inclure la classe spécifique que vous avez ajoutée.

Assurez-vous d'ajuster les chemins et les noms de fichiers dans l'extrait ci-dessus pour qu'ils correspondent à la structure de votre projet. De plus, si vous utilisez un système ou un outil de build différent, vous devrez peut-être ajuster votre configuration en conséquence.

Avec ce paramètre, vous n'avez pas besoin de réeffacer manuellement les fichiers CSS chaque fois que vous ajoutez une classe de la bibliothèque CSS à votre projet. Au lieu de cela, PurgeCSS surveillera les modifications et inclura dynamiquement ces classes pendant le processus de construction.