less本身不支持自动移除无用css，需依赖purgecss等构建工具配合@import(reference)调用标记、js动态类显式配置及正确postcss插件顺序（purgecss在cssnano前）来实现。
Less 本身不支持自动移除无用 CSS
别指望 lessc 命令加个参数就能“删掉没用的类”——Less 编译器只做变量替换、Mixin 展开和语法转换，它根本不分析 HTML 或 JS 中哪些类被用了。所谓“批量移除无用 CSS”，实际是构建链路中其他工具的事，Less 只负责提供干净、模块化的源码基础。
PurgeCSS 是主力，但必须配对 Less 源码结构
真正干活的是 PurgeCSS，但它默认只扫描文件里的字符串字面量，而 Less 项目常通过 @import (reference) 引入变量和 Mixin，这些不会输出 CSS，也不会被 PurgeCSS 当作“使用痕迹”。结果就是：你明明调用了 .button-style()，PurgeCSS 却因没在 JS/HTML 里看到 "button-style" 字符串，直接把对应样式干掉了。
- 确保所有会被 JS 动态拼接的类名（如
className={`btn ${type}-btn`}）都显式写进purgecss.content配置的 glob 路径里，例如：['./src/**/*.{js,ts,jsx,tsx,html}'] - 如果用了
@import (reference)，得在调用处补上注释标记，比如// purgecss: keep，再配合自定义defaultExtractor提取这类提示 - Vite 用户别用原生
purgecss，改用vite-plugin-purgecss，它在 Rollup transform 阶段运行，能扫到编译后的 JS 字符串
PostCSS 插件顺序错位会让 PurgeCSS 失效
很多人把 purgecss 放在 cssnano 后面，结果 PurgeCSS 删完类，cssnano 又把残留的空规则合并优化，最后产出一堆 {} 或损坏的选择器链，页面白屏。这不是 PurgeCSS 没用，是插件顺序反了。
- 正确顺序必须是：
postcss-import→tailwindcss（如有）→purgecss→autoprefixer→cssnano -
cssnano的discardUnused: true默认开启，和 PurgeCSS 功能重叠，必须关掉：{ discardUnused: false } - Less 编译后若走 PostCSS 流程，
postcss.config.js里禁用postcss-preset-env的类名重命名，否则 PurgeCSS 看到的类名和源码对不上
Less 编译阶段要禁用压缩混淆干扰检测
--clean-css 在压缩时会合并选择器、简化单位，甚至重排属性顺序，这会导致 PurgeCSS 的覆盖率分析失真——它基于原始层叠逻辑判断“是否被覆盖”，而压缩后的 CSS 已经不是那个逻辑了。
- 本地调试和 CI 构建前，统一用
lessc input.less output.css --compress，只删空格换行，保留完整结构 - 绝对不要在 PurgeCSS 前启用
cssnano的reduceIdents或zindex优化，它们会重命名类或调整层级，让 PurgeCSS “认不出”自己该留谁 - Less 源码里避免
/*! */以外的注释，--clean-css默认保留它们，可能让 PurgeCSS 把带注释的规则误判为“人工保留项”
真正麻烦的不是配置 PurgeCSS，而是得同时盯住三处：Less 源码里 @import (reference) 的调用点、JS 中动态 class 的生成方式、PostCSS 插件链的执行时机。漏掉任何一环，删掉的就不是“无用样式”，而是某个后台弹窗按钮的 hover 效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
