vue项目引入less需装less和less-loader并配additionaldata注入全局文件；globalvars仅转字符串，不支持mixin和函数，路径别名需用~@/，scoped样式要求变量顶层声明且重启服务生效。
Vue项目里引入Less，核心就两步：装对包、写对lang="less"；但要让全局变量、mixin真正可用，光靠css.loaderOptions.less.globalVars会掉坑里。
安装 less 和 less-loader 必须成对出现
只装less或只装less-loader都会报错，常见错误是Module build failed: Error: Cannot find module 'less'或Unknown word。必须执行：
-
npm install less less-loader --save-dev（Vue CLI 5 默认支持，但依赖仍需显式安装） - 如果用 Vue 2 + 自定义 Webpack 配置，还要确认
webpack.config.js中rules已包含/\.less$/匹配项 - 别装
less-plugin-xxx这类非官方插件——Vue CLI 不认，反而干扰解析
vue.config.js 中配置 globalVars 的真实限制
css.loaderOptions.less.globalVars看着简洁，但只适合极简场景。它底层调用 Less 的modifyVars，所有值都会被强制转成字符串字面量：
- 写
@import "@/styles/mixins.less"？直接报ParseError: Unexpected token - 定义
.my-mixin() { color: red; }？无效，loader 不处理函数体 - 用
@secondary: darken(@primary, 10%)？darken未注册，构建失败 - 路径别名
@/不识别，必须写绝对路径或改用additionalData
用 additionalData 注入全局 Less 文件更可靠
这是目前兼容性最好、写法最直白的方式，适用于 Vue CLI 3/4/5，且支持scoped样式：
- 在
vue.config.js中写：module.exports = { css: { loaderOptions: { less: { additionalData: `@import "~@/styles/variables.less"; @import "~@/styles/mixins.less";` } } } } -
~@/依赖 Webpack alias，默认指向src/，比path.resolve()不易出错 - 多个文件用分号拼接，注意末尾不能有换行或空格，否则 Less 解析失败
- 如果
@别名被重定义过（比如指向src/components），就得改成~src/styles/variables.less
scoped 样式里用 Less 变量和 mixin 的隐含前提
即使配置了additionalData，scoped 样式中仍可能报undefined variable或mixin is undefined：
- 检查
variables.less里有没有漏掉分号、括号不闭合——Less 编译器很严格，一处语法错就整页白屏 - mixin 定义不能嵌套在
@media、&.foo或选择器块里，必须是顶层声明 - 修改完
variables.less后，必须重启npm run serve；Vue CLI 缓存 webpack 配置，删node_modules/.cache才能彻底刷新 -
scoped不会阻止additionalData注入，但变量作用域仍是全局的，无需额外导出
真正容易被忽略的是：所有注入方式都依赖less-loader的执行顺序——它必须在css-loader之前，而 Vue CLI 通常自动保证这点；一旦你手动加了其他 style 相关 loader（比如style-resources-loader），顺序错乱就会导致变量“看似生效实则丢失”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
