Less 本身不提供局部类名转换功能，它仅将嵌套、变量、Mixin 编译为标准 CSS，类名保持原样；局部化需依赖构建工具链（如 CSS Modules）配置，与 Less 语法无关。
Less 本身不提供局部类名转换能力——它压根不会重命名类名，也不会加属性选择器。你看到的“未转换”，不是它没做对，而是它根本没这个功能。
Less 编译后类名还是原样？因为它是预处理器，不是作用域工具
Less 只负责把嵌套、变量、Mixin 转成标准 CSS，输出的 .button 就是 .button，不会变成 .Button_button__abc123 这种哈希名。所谓“局部类名”是 CSS Modules、Vue 的 <style scoped> 或 PostCSS 插件干的事，和 Less 无关。
- 如果你用的是 Webpack +
less-loader，但没配css-loader?modules，那 Less 编译完的 CSS 就直接当全局样式注入，类名当然不变 - 如果你在 Vue 单文件组件里写了
<style lang="less" scoped>，那起作用的是scoped，不是lang="less"—— 换成scss或纯css，效果一样 - 别指望
lessc命令行加个参数就能开启“局部化”，它没有这个开关
想让 Less 文件里的类名被局部化，得靠构建链路接对
Less 文件必须被 CSS Modules 流程接管，才可能重命名。关键不是 Less 怎么写，而是 loader 配置是否把它的输出喂给了模块化系统。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- Webpack 中，
less-loader后面必须接css-loader?modules（或vue-style-loader+css-loader?modules），否则@import进来的 Less 内容仍按全局处理 - 如果用了
postcss-import替代 Less 原生@import，注意它默认不触发 CSS Modules；需显式配置postcss-modules插件并指定generateScopedName - 在 Vite 中，
style: { modules: true }默认只对.module.less生效，普通.less文件不会被模块化
常见误判：以为加了 :global() 就说明 Less 支持局部化
:global() 是 CSS Modules 的语法，不是 Less 的。你在 Less 文件里写 :global(.btn)，前提是这个文件正被 CSS Modules 处理；否则，Less 编译器会直接报错 ParseError: unknown pseudo-class :global。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.my-comp { :global(.btn) { color: red; } }—— 如果没走 CSS Modules，这行根本过不了 Less 编译 - 正确前提：该 Less 文件路径匹配了构建工具中启用 modules 的规则（如 Webpack 的
test: /\.module\.less$/） - 别在
variables.less里混写:global，它通常被多个模块@import，一旦启用 modules，整个文件都会被局部化，反而破坏变量复用
真正容易被忽略的点：Less 文件是否被识别为“模块化入口”，取决于文件后缀、路径匹配规则、loader 配置三者共同作用，而不是你写了多少嵌套或变量。一个 .less 文件，哪怕内容全是 @import，只要没进 modules 流程，它就永远只是全局 CSS 的搬运工。
