Why can't I update my css files via purgecss?

Question

I'm implementing a mini CSS library using SASS and I want to purge it, currently I'm using purgecss and I don't have any problems with it, but one problem is when I add a class from the CSS library to my html, the A specific class will not be included in my purge file, I need to re-purge my CSS library CSS file to include that specific class, but I need purgecss to monitor my CSS file and add the class when adding it to my project, And I don't need to clear the CSS file again, any ideas?

Answer 1

To dynamically include classes from a CSS library without having to manually re-purge the CSS files, you can use PurgeCSS with PurgeCSS's additional configuration file to monitor CSS files and include specific classes.

The setting method is as follows:

1. Create the PurgeCSS configuration file: First create a separate configuration file for PurgeCSS, we name it purgecss.config.js. This file will specify the files to clean and any other configuration options.

// 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. Configure the build process: You need to configure the build process to monitor CSS files and trigger PurgeCSS when changes occur. You can use tools like Webpack, Gulp, or Grunt to accomplish this task. Here's an example using 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. Start the build process: Now, whenever you add a class from a CSS library to an HTML file, the build process automatically monitors the changes and triggers PurgeCSS to include the specific class you added.

Make sure to adjust the paths and filenames in the snippet above to match your project structure. Additionally, if you use a different build system or tool, you may need to adjust your configuration accordingly.

With this setting, you don't need to manually re-clear the CSS files every time you add a class from the CSS library to your project. Instead, PurgeCSS will monitor changes and dynamically include these classes during the build process.