less无法检测或剔除未使用css规则，因其仅是文本级预处理器，不解析dom或追踪js动态类名；真正负责此任务的是构建期工具如purgecss，需配合正确配置与运行时验证。
Less 本身不提供检测或剔除未使用 CSS 规则的能力——它只是预处理器，编译时不做运行时行为分析，也不扫描 HTML/JS 中的 class 使用情况。真正能干这事的是构建期工具（如 PurgeCSS），而 Less 的角色仅限于“别让冗余样式进编译流水线”。
为什么不能靠 Less 编译过程自动删死代码
Less 的 @import、mixin、extend 都是文本级展开，它不解析 DOM 结构，也不追踪 JS 动态类名拼接（比如 el.classList.add('btn-' + type)）。即使你把所有样式都写在 Less 里，只要没被 HTML 或 JS 显式引用，Less 也完全不知道哪些该留、哪些该砍。
常见误判场景：
-
@import (reference)引入的文件，其选择器规则不会输出，但变量/mixin 可用——你以为样式“被用了”，其实压根没进最终 CSS - 嵌套过深或递归
mixin导致编译卡死或静默截断，部分规则根本没生成 - 路径写错（如
@import "mixins"少了.less后缀），Less 在javascriptEnabled: true下可能尝试执行 JS 表达式，结果报错跳过整条@import
PurgeCSS 是主力，但 Less 必须配合它不翻车
PurgeCSS 不是 Less 插件，而是独立构建工具，它靠字符串匹配白名单来剔除未声明的选择器。Less 文件若没被正确纳入 content 配置，或类名动态生成方式太隐蔽，就会误删。
Less 层面必须做的几件事：
- 确保所有可能用到的类名，在
.less、.html或.js源码中以**字面量形式出现**：比如class="btn btn--primary"，而不是class="btn btn--" + type - 对动态类名加
safelist：在purgecss配置里写/^btn--.+/或['btn--primary', 'btn--danger']，否则btn--primary这种会被全干掉 - 避免通配符导入：
@import "components/*.less"在原生 Less 中无效，Webpack 等工具会静默加载全部，导致本该按需的组件样式全进包 - 检查编译输出：如果看到
.icon, .btn-icon, .menu-icon { }这种合并块，说明:extend()生效；如果只有孤立规则，大概率是extend目标没被输出（比如被(reference)拦截）
运行时验证比静态扫描更可靠
Chrome DevTools 的 Coverage 面板（Cmd+Shift+P → Coverage）能标出当前页面加载的 CSS 中哪些规则从未触发，但它只反映当前路由和交互状态。单页应用（SPA）必须手动模拟所有关键路径：
- 登录态 / 游客态
- 下拉菜单展开、弹窗打开、表单校验失败等 JS 控制的 UI 状态
- 媒体查询生效场景（如
@media (min-width: 768px)）需切换 viewport 宽度再刷新
更稳妥的做法是用 Puppeteer 或 Playwright 写脚本遍历所有路由并触发关键交互，导出真实命中过的类名列表，再跟 PurgeCSS 的 removedSelectors 日志比对——漏掉的、但实际在用的，就是必须补进 safelist 的硬编码点。
最常被忽略的一点：PurgeCSS 的 content 配置漏掉任何一类入口文件（比如忘了加 src/**/*.tsx），就等于主动放弃对那部分 class 的识别能力。它不是“找没用的”，而是“只留它看得到的”——看不见，就等于不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
