Less编译阶段无法用正则重命名类名，因其选择器为静态字符串；可行方案是Less编译后通过PostCSS插件（如postcss-replace-regex）正则处理CSS；或用变量+mixins在源头控制类名生成。
Less编译时无法用正则直接重命名类名
Less本身不支持在编译阶段对生成的CSS类名做正则替换——class 名是静态字符串，解析器不会把它当作可正则处理的文本流。你写的 .btn-primary 就是字面量，不是变量或表达式，replace() 函数也只作用于字符串值（比如 @str），不能穿透到选择器结构里。
真正可行的方案：用PostCSS插件在Less输出后处理
Less编译完得到的是纯CSS，这时再用PostCSS接管，就能安全、精准地用正则操作类名。这是目前最稳定、社区验证过的路径，避免侵入Less语法或自己写AST解析器。
- 安装
postcss和postcss-replace-regex（或更通用的postcss-selector-transform） - 配置构建流程：Less → CSS → PostCSS（启用正则替换）
- 例如把所有
.v2-xxx类名批量转成.v3-xxx：replace(/\.v2-(\w+)/g, '.v3-$1')
- 注意：PostCSS操作的是最终CSS，所以伪类、属性选择器等完整结构都保留，不会误伤
content: "v2-text"这类字符串
Less Plugin扩展的局限性与风险
Less官方允许通过 plugin 注册自定义函数或访问AST，但“修改类名”属于高危操作——它要求你手动遍历并重写 Ruleset 节点的选择器字段，而Less的AST文档极简，节点结构易变（如 v4.x 与 v5.x 的 Selector 内部字段名不同），极易导致编译崩溃或生成无效CSS。
- 自研插件需严格绑定Less版本，升级Less前必须重测
- 无法处理嵌套规则中的动态类名（如
&.is-active中的&绑定逻辑） -
less.render()的plugins选项只接受预编译JS模块，不能热加载或调试正则逻辑
更轻量的替代思路：用变量+命名约定规避正则需求
如果目标只是统一前缀或环境隔离，与其后期正则替换，不如从Less源头控制类名生成逻辑。
- 定义命名空间变量：
@ns: "myapp";，然后写.<code>@{ns}-button { ... } - 配合
mixins封装带前缀的组件：.make-component(@name) { .<code>@{ns}</code>-<code>@name</code> { ... } } - 构建时通过
modifyVars动态注入@ns值，实现多环境类名隔离 - 这种方式零依赖PostCSS，无正则歧义，且IDE能正常识别和跳转
正则改类名听着灵活，实际落地时80%的case都卡在“怎么确保只改类名、不碰URL/字符串/注释”，PostCSS虽多一道流程，但边界清晰；自己撸Less插件看似彻底，却常因AST细节翻车。选哪条路，取决于你是否真需要运行时动态决定类名形态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
