如何使用UnCSS？已安装却不知用NPM脚本扫描全站HTML文件

嘿，我来帮你搞定这个问题！既然你已经全局安装了UnCSS，咱们直接进入npm脚本的配置步骤，顺便给你提些更稳妥的实践建议：

步骤1：（可选但推荐）本地安装UnCSS #

全局依赖有时候会因为版本差异出问题，建议把UnCSS装到项目的开发依赖里，这样团队协作时环境更一致：

npm install uncss --save-dev

步骤2：配置NPM脚本 #

打开项目根目录的package.json，在scripts字段里添加对应的UnCSS命令，根据你的项目结构选下面的方案：

方案1：指定单个/多个HTML文件 #

如果你的HTML文件都在根目录，或者能明确列出路径：

"scripts": {
  "clean-css": "uncss index.html about.html -o css/cleaned-styles.css"
}

• index.html about.html：要扫描的HTML文件路径，多个文件用空格分隔
• -o css/cleaned-styles.css：清理后的CSS输出路径

方案2：扫描整个目录下的所有HTML #

如果你的HTML文件分散在某个目录（比如dist或public），用通配符批量扫描：

"scripts": {
  "clean-css": "uncss dist/**/*.html -c src/css/original-styles.css -o dist/css/cleaned-styles.css"
}

• dist/**/*.html：匹配dist目录下所有子文件夹里的HTML文件
• -c src/css/original-styles.css：指定要处理的原CSS文件（UnCSS会从这里提取被HTML用到的样式）
• -o dist/css/cleaned-styles.css：输出清理后的CSS文件路径

方案3：用配置文件管理复杂规则 #

如果需要忽略动态添加的CSS类（比如JS控制的交互类），或者配置项太多，建议用单独的配置文件：

1. 在项目根目录创建uncss.config.js：

module.exports = {
  html: ['dist/**/*.html'], // 要扫描的HTML文件集合
  stylesheets: ['src/css/original-styles.css'], // 待处理的原CSS文件
  output: 'dist/css/cleaned-styles.css', // 清理后CSS的输出路径
  ignore: ['.dynamic-modal', '.js-loaded'] // 需要保留的类（不会被UnCSS移除）
};

2. 在package.json里修改脚本：

"scripts": {
  "clean-css": "uncss --config uncss.config.js"
}

步骤3：运行脚本 #

配置好后，在终端执行以下命令就能开始清理未使用的CSS：

npm run clean-css

重要提醒 #

• 运行前一定要备份原CSS文件，避免意外丢失样式
• 动态添加的类（比如通过JS在交互时添加的）一定要加到ignore列表里，不然会被误删导致功能异常

内容的提问来源于stack exchange，提问作者rk_1