vue 2项目需手动配置webpack规则才能支持lang="less"，仅安装less和less-loader不够；必须正确配版本、注入全局变量（用additionaldata而非modifyvars）、处理@别名路径及scoped嵌套逻辑。
Vue 2项目默认不支持lang="less"，光装less和less-loader不行，必须手动配Webpack规则，否则会报Module parse failed: Unexpected character '@'或Cannot find module 'less'。
vue.config.js 配置（适用于 Vue CLI 3+ 项目）
如果你用的是 Vue CLI 创建的 Vue 2 项目（比如通过 vue create 或升级过脚手架），直接在项目根目录加 vue.config.js 即可生效，无需动 Webpack 配置文件：
-
less-loader@5.0.0对应less@3.x；less-loader@7+要求less@4.x，版本错配会触发less-loader is not a constructor - 全局变量注入别用
modifyVars—— 它只对 Ant Design 这类 UI 库主题定制有效；业务变量请走additionalData -
additionalData是字符串，必须带分号结尾：@import "@/styles/variables.less";，漏掉分号会导致编译失败 - 路径里的
@别名由 Vue CLI 自动解析，但@import是 Less 编译期行为，不能依赖 Webpack alias，所以确保variables.less真实存在且路径可访问
webpack.base.conf.js 配置（适用于 Vue CLI 2 / 手动搭建项目）
老项目（如 vue init webpack my-project 创建的）需改 build/webpack.base.conf.js 的 rules：
- 在
rules数组里加一条：{ test: /\.less$/, use: ['vue-style-loader', 'css-loader', 'less-loader'] } - 如果要用全局变量，得额外加
sass-resources-loader（注意：名字带sass但支持 Less），并指定resources路径为绝对路径，比如path.resolve(__dirname, '../src/styles/vars.less') - 不要把
less-loader和css-loader顺序写反，否则@import和变量无法识别 -
vue-style-loader必须在最前，它是把 CSS 注入 DOM 的关键，丢了就看不到样式
scoped 样式里嵌套与 & 的实际表现
<style lang="less" scoped></style> 不是“先编译 Less 再加 scope”，而是先展开嵌套、再给所有选择器加属性选择器。这导致几个常见误解：
-
.box { .inner { color: red; } }编译后是.box[data-v-xxx] .inner[data-v-xxx]，不是.box[data-v-xxx] .inner—— 所以.inner实际是全局类，可能污染其他组件 - 想让子元素也绑定 scope，必须显式用
&：.box { &__inner { color: red; } }，才会生成.box__inner[data-v-xxx] - 第三方组件（如 Element UI）的 class 无法被 scoped 嵌套命中，穿透只能靠
:deep(.el-button)，Less 原生嵌套无效 -
@import在 scoped 样式里仍按 Less 规则解析，但导入内容不会自动加 scope，它只是把代码拼进去而已
less 文件中 @import 路径解析失败的典型原因
在 .less 文件里写 @import "@/styles/mixins.less" 报错，大概率不是语法问题，而是路径没被 Less 解析器识别：
- Less 不认识 Webpack 的
@别名，除非你在lessOptions.paths里显式配置了别名映射 - 相对路径必须基于当前
.less文件位置计算，比如@import "./mixins.less"，而不是从 src 根目录开始 - 如果用了
additionalData全局注入变量，就别在每个组件里重复@import，否则可能变量被多次定义，引发覆盖或冲突 - pnpm 用户要注意：
less必须出现在项目根node_modules下，不能被提升到 workspace 级别，否则 loader 找不到模块
最易被忽略的一点：Vue 2 的 scoped + less 组合下，& 的作用域始终锚定在组件根元素，不是上层嵌套选择器——这点和 Sass 的行为不同，也和很多人直觉相反。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
