为什么我无法通过 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 将监视更改并在构建过程中动态包含这些类。