Mengapa saya tidak boleh mengemas kini fail css saya melalui purgecss?

Question

Saya sedang melaksanakan perpustakaan CSS mini menggunakan SASS dan saya mahu membersihkannya, pada masa ini saya menggunakan purgecss dan saya tidak mempunyai sebarang masalah dengannya tetapi satu masalah ialah apabila saya menambah kelas dari perpustakaan CSS ke html saya , kelas tertentu itu tidak akan dimasukkan dalam fail pembersihan saya, saya perlu membersihkan semula fail CSS perpustakaan CSS saya untuk memasukkan kelas khusus itu, tetapi saya memerlukan purgecss untuk memantau fail CSS saya dan menambah kelas apabila menambahkannya pada projek saya, dan saya Tidak perlu mengosongkan fail CSS sekali lagi, ada idea?

Answer 1

Untuk memasukkan kelas secara dinamik daripada pustaka CSS tanpa perlu membersihkan semula fail CSS secara manual, anda boleh menggunakan PurgeCSS bersama-sama dengan fail konfigurasi tambahan PurgeCSS untuk memantau fail CSS dan memasukkan kelas tertentu.

Kaedah tetapan adalah seperti berikut:

1. Buat fail konfigurasi PurgeCSS: Mula-mula buat fail konfigurasi berasingan untuk PurgeCSS, mari namakannya purgecss.config.js. Fail ini akan menentukan fail untuk dibersihkan dan sebarang pilihan konfigurasi lain.

// 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. Konfigurasikan proses binaan: Anda perlu mengkonfigurasi proses binaan untuk memantau fail CSS dan mencetuskan PurgeCSS apabila perubahan berlaku. Anda boleh menggunakan alatan seperti Webpack, Gulp atau Grunt untuk menyelesaikan tugas ini. Berikut ialah contoh menggunakan 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. Mulakan proses binaan: Sekarang, apabila anda menambah kelas daripada pustaka CSS ke fail HTML, proses binaan memantau perubahan secara automatik dan mencetuskan PurgeCSS untuk memasukkan kelas khusus yang anda tambahkan.

Pastikan anda melaraskan laluan dan nama fail dalam coretan di atas agar sepadan dengan struktur projek anda. Selain itu, jika anda menggunakan sistem atau alat binaan yang berbeza, anda mungkin perlu melaraskan konfigurasi anda dengan sewajarnya.

Dengan tetapan ini, anda tidak perlu mengosongkan semula fail CSS secara manual setiap kali anda menambah kelas daripada pustaka CSS pada projek anda. Sebaliknya, PurgeCSS akan memantau perubahan dan menyertakan kelas ini secara dinamik semasa proses binaan.