根本原因是 less-loader 先编译 less 为纯 css，导致 postcss 无法在结构层面注入[data-v-xxx]，scoped 失效；lang="less" 与 module 互斥，因 css-loader 的 modules 规则不匹配 .less 文件。
为什么 <style lang="less" scoped></style> 看似正常却没效果
根本原因不是 Less 写错了，而是 Vue 的构建链路里，scoped 和 lang="less" 的协作机制被切断了。Vue 的 scoped 依赖 PostCSS 在 CSS 字符串层面注入 [data-v-xxx] 属性选择器；但 less-loader 先把 Less 编译成纯 CSS 字符串后，就“交棒”给后续 loader，此时已无结构信息可让 PostCSS 插入 scope 属性。
结果就是：你写的 .btn { color: red } 经 less-loader 输出为 .btn { color: red }，再经 css-loader 处理时，它只看到普通 CSS，不会加 [data-v-xxx] —— 浏览器里元素没这个属性，样式自然不匹配。
验证方式很简单：打开 DevTools → Elements 面板，看目标元素有没有 data-v-xxx 属性；再切到 Styles 面板，看生效的规则里是否含该属性。如果都没有，说明 scoped 根本没走通。
<style lang="less" module></style> 会直接报错或静默失效
Less 解析器不认识 composes、:global() 这类 CSS Modules 语法，遇到就抛 ParseError: Unexpected token 'composes'。即使没报错，css-loader?modules 也只对 .css 或 .module.css 规则生效，对 .less 文件默认跳过 modules 处理。
所以别试图混用：lang="less" 和 module 是互斥的。Webpack/Vite 配置里搜 css-loader，大概率能看到类似这样的规则：
{
test: /\.module\.css$/,
use: [/* ... */, { loader: 'css-loader', options: { modules: true } }]
}
它根本不会命中 .less 文件。
想用 Less 又要局部作用域，只能靠人工命名 + 构建时包裹
放弃让 Less 自己“模块化”，转而用工程化手段补位。核心就两条：
- 每个组件 Less 文件最外层必须套唯一根选择器，比如
.UserProfile { .avatar { ... } }，禁止出现裸露的.avatar - 在 PostCSS 配置中启用
postcss-prefixwrap，例如：prefixwrap('[data-comp="user-profile"]')，它会把整个文件编译后的 CSS 自动包一层属性选择器
这样输出就是 [data-comp="user-profile"] .avatar { ... }，既保持 Less 可读性，又获得 scoped 级别的隔离效果。注意：别在 Less 里 @import 全局主题文件（如 ~antd/lib/style/themes/default.less），变量和 mixin 会污染全局，应改用局部 @import '~antd/lib/style/mixins' 这类仅含工具的文件。
:deep() 在 Less 里容易写错括号和嵌套层级
Vue 3 中 :deep() 不是万能穿透器，它只接受简单选择器，且必须挂载在 scoped 根选择器下。在 Less 嵌套语法里尤其容易翻车：
- ✅ 合法：
.my-form { &:deep(.van-button) { color: blue; } } - ❌ 静默失效：
.my-form { :deep(.van-button span) { ... } }（含空格，不支持） - ❌ 报错或无效：
.my-form { &:deep(.van-button:hover) { ... } }（伪类不支持）
如果要穿透多层，得拆开写：.my-form :deep(.van-button) span，而不是塞进一个 :deep() 里。另外，:deep() 只解决子组件样式穿透问题，不解决 Less 本身模块化缺失的问题——它只是“绕过隔离”，不是“建立隔离”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
