为什么我无法通过 purgecss 更新我的 css 文件？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

为什么我无法通过 purgecss 更新我的 css 文件？

P粉466643318 2023-09-14 19:27:35

[CSS3讨论组]

801

我正在使用 SASS 实现一个迷你 CSS 库，我想清除它，目前我正在使用 purgecss，我对此没有任何问题，但一个问题是当我从 CSS 库向我的 html 添加一个类时，该特定类不会包含在我的清除文件中，我需要重新清除我的 CSS 库 CSS 文件以包含该特定类，但我需要 purgecss 监视我的 CSS 文件并在将其添加到我的项目时添加类，并且我不需要重新清除 CSS 文件，有什么想法吗？

P粉466643318

全部回复(1)

P粉8141609882023-09-15 00:40:21 1楼

要动态包含 CSS 库中的类，而无需手动重新清除 CSS 文件，您可以结合使用 PurgeCSS 和 PurgeCSS 的附加配置文件来监视 CSS 文件并包含特定的类。

设置方法如下：

创建 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
};

配置构建过程：您需要配置构建过程以监视 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
    }),
  ],
};