Vue 3 中 Less 失效主因是依赖缺失或版本错配：需手动安装 less@4.2.0+ 和 less-loader@8.1.1+ 到 devDependencies，清除缓存后重装；scoped 下穿透须用 :deep() 且语法规范；@import 必须置顶且路径正确。
Vue 3 中 Less 失效，基本不是语法或写法问题，而是构建工具链底层依赖缺失或版本错配——Vue CLI 5+ 和 Vite 默认不带 Less 支持，less 和 less-loader 必须手动装、且版本必须对得上。
less 和 less-loader 没装或装错位置
报错 Module build failed: Error: Cannot find module 'less' 是最直接信号：项目里压根没装 less，或者只用 --save 装进了 dependencies，但构建时需要的是 devDependencies。
- 必须运行：
npm install --save-dev less less-loader - 检查是否真装上了：
npm list less less-loader，如果显示empty或MISSING，说明没装对 - Vue CLI 4 及更早默认带
less-loader，但 Vue CLI 5+（对应 Vue 3）已移除内置支持，不装就必然报错 - Vite 同理，默认不识别
lang="less"，不装依赖就静默跳过编译，样式块直接为空
less-loader 版本与 Webpack/Vite 不兼容
报错 this.getOptions is not a function 或 loaderContext.getResolve is not a function，说明 less-loader 版本太高，和当前构建环境不匹配。
- Vue 3 项目多基于 Webpack 5 或 Vite，而
less-loader@8+才正式支持 Webpack 5 的新 API - 若
less-loader是 v7.x 或更低，会因调用旧 API 报错；若它是 v9+ 但less还是 v3.x，又会触发less.render is not a function - 必须配对：
less@4.2.0++less-loader@8.1.1+，二者缺一不可 - 装完务必删掉
node_modules和package-lock.json，再npm install——缓存残留是复现问题的高频原因
scoped 中 Less 嵌套 + 深度穿透写法错误
样式“看起来写了，但没生效”，尤其在覆盖 el-input、van-button 等 UI 组件时，大概率是穿透机制用错了。
立即学习“前端免费学习笔记（深入）”；
-
/deep/在 Vue 3 中已被弃用，::v-deep也仅在部分 loader 配置下兼容；Vue 3 官方推荐写法是:deep()，且括号内只能写简单选择器 - 错误写法：
::v-deep .el-input__inner（无括号）、:deep(.el-input__inner:hover)（伪类不被支持）、.form { ::v-deep .el-input { ... } }（嵌套内再加穿透，导致多余[data-v-xxx]） - 正确写法：
:deep(.el-input__inner) { border-color: #1890ff; }，且必须紧贴外层容器，不能缩进、不能换行 - Less 本身不处理作用域，它只是文本转换器；
scoped是vue-loader注入data-v-xxx属性实现的——两者不在同一处理阶段，嵌套不会自动“透出”
@import 变量未定义或路径失效导致整个样式块为空
Less 编译结果为空，往往不是报错，而是静默失败：变量未定义、@import 路径 404、文件为空或含零宽字符，都会让编译中途退出，输出空 CSS。
-
@import必须放在.less文件最顶部，且顺序不能乱；.btn { color: @primary-color; } @import "vars.less";这种写法一定失败 - Vue 单文件组件中，每个
<style lang="less">是独立编译上下文，@import不跨组件共享；不能指望全局变量，必须每个文件都显式@import "@/styles/variables.less" - Vite 用户注意：
additionalData配置中别名路径（如@/styles/variables.less）会被 Less 引擎忽略，必须用绝对路径：path.resolve(__dirname, 'src/styles/variables.less') - 用命令行验证：
lessc src/components/Button.vue > out.css，看 stderr 是否有NameError，这是定位变量问题最快方式
真正卡住人的，从来不是“怎么写”，而是“谁在什么时候处理了哪一段”。Less 是预处理器，scoped 是 vue-loader 的属性注入，:deep() 是 Vue 编译器的 AST 操作——三者分属不同阶段，任何一环版本或配置错位，都会让样式消失得毫无征兆。每次改完依赖，清缓存、重装、重启服务，缺一不可。
