為什麼我無法透過 purgecss 更新我的 css 檔案？

Question

我正在使用SASS 實作一個迷你CSS 庫，我想清除它，目前我正在使用purgecss，我對此沒有任何問題，但一個問題是當我從CSS 庫向我的html 添加一個類別時，該特定類不會包含在我的清除文件中，我需要重新清除我的CSS 庫CSS 文件以包含該特定類，但我需要purgecss 監視我的CSS 文件並在將其添加到我的項目時添加類，而且我不需要重新清除CSS 文件，有什麼想法嗎？

Answer 1

要動態包含 CSS 庫中的類，而無需手動重新清除 CSS 文件，您可以結合使用 PurgeCSS 和 PurgeCSS 的附加配置文件來監視 CSS 文件並包含特定的類。

設定方法如下：

1. 建立 PurgeCSS 設定檔：首先為 PurgeCSS 建立一個單獨的設定文件，我們將其命名為 purgecss.config.js。該文件將指定要清除的文件以及任何其他配置選項。

// 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. 設定建置流程：您需要設定建置流程以監視 CSS 檔案並在發生變更時觸發 PurgeCSS。您可以使用 Webpack、Gulp 或 Grunt 等工具來完成此任務。這是使用 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. 開始建置流程：現在，每當您將 CSS 庫中的類別新增至 HTML 檔案時，建置流程都會自動監視變更並觸發 PurgeCSS 以包含您新增的特定類別。

確保調整上面程式碼片段中的路徑和檔案名稱以符合您的專案結構。此外，如果您使用不同的建置系統或工具，則可能需要相應地調整配置。

透過此設置，每次將 CSS 庫中的類別新增至專案時，您無需手動重新清除 CSS 檔案。相反，PurgeCSS 將監視變更並在建置過程中動態包含這些類別。