Warum kann ich meine CSS-Dateien nicht über purgecss aktualisieren?

Question

Ich implementiere eine Mini-CSS-Bibliothek mit SASS und möchte sie bereinigen. Derzeit verwende ich purgecss und habe keine Probleme damit, aber ein Problem ist, wenn ich eine Klasse aus der CSS-Bibliothek zu meinem HTML hinzufüge , diese bestimmte Klasse wird nicht in meiner Bereinigungsdatei enthalten sein. Ich muss die CSS-Datei meiner CSS-Bibliothek erneut bereinigen, um diese bestimmte Klasse einzuschließen, aber ich benötige purgecss, um meine CSS-Datei zu überwachen und die Klasse hinzuzufügen, wenn ich sie zu meinem Projekt hinzufüge. und ich müssen die CSS-Dateien nicht erneut löschen, irgendwelche Ideen?

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