最直接方式是通过 vue.config.js 的 lessOptions.modifyVars 配置全局 Less 变量，需设 javascriptEnabled: true，变量值带单位须为字符串；若需导入 variables/mixins 等完整 Less 文件，则用 style-resources-loader。
vue.config.js 里配 lessOptions.modifyVars 最直接
Vue CLI 项目（3.x+）不需要动 webpack 底层配置，vue.config.js 就能覆盖 less 编译时的全局变量。这是目前最轻量、最稳定的方式，modifyVars 本质是让 less 在编译每个 .less 文件前，自动注入变量声明，优先级高于文件内定义。
常见错误现象：@primary-color 在组件里报 undefined，但手动 @import 又能用——说明变量没进编译上下文，不是路径或拼写问题，而是 loader 没接管。
-
modifyVars接收一个对象，键是变量名（不带@），值是字符串或数字，比如{ 'primary-color': '#1890ff', 'font-size-base': '14px' } - 必须设
javascriptEnabled: true，否则unit()、color()等函数会报错 - 如果变量值含单位（如
12px），务必用字符串包裹；数值型（如0.8）可不加引号 - 该配置只影响
<style lang="less">，不影响 JS 里动态生成的样式
用 style-resources-loader 导入 .less 文件更灵活
当你有一整套 variables.less、mixins.less、reset.less，且希望保持原有 Less 语法结构（比如嵌套、.icon() { &::before { ... } }），style-resources-loader 是更自然的选择。它相当于在每个 <style lang="less"> 开头自动插入 @import。
容易踩的坑：patterns 路径必须是绝对路径，path.resolve(__dirname, '...') 缺一不可；多个文件要列全，loader 不会递归扫描目录。
立即学习“前端免费学习笔记（深入）”；
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 安装：
npm install style-resources-loader -D（Vue CLI 5+ 已内置支持，无需额外插件） - 配置位置：在
vue.config.js的pluginOptions['style-resources-loader']下 -
preProcessor必须设为'less'，大小写敏感 - 如果同时用了
modifyVars和style-resources-loader，后者定义的变量会覆盖前者（因为 import 在后）
Vue CLI 2（webpack 3）必须改 build/utils.js
老项目还没升级 CLI 3+，就得手动钻进 build/utils.js 的 generateLoaders 函数里加逻辑。这里没有高层封装，出错容易卡死整个 CSS 构建流程。
典型错误：加完 loader 后热更新失效、样式不生效、控制台报 Module build failed: Error: Cannot find module 'less'——多半是 loader 顺序错了，或 less-loader 版本和 less 不兼容（比如 less-loader@7 需配 less@3.13+）。
- 找到
if (loader === 'less') { ... }分支，在loaders.push(...)前补上style-resources-loader配置 - 确保
style-resources-loader在less-loader之后、css-loader之前（顺序：vue-style → css → less → style-resources） -
patterns必须用path.resolve(__dirname, '../src/...')，相对路径会找不到文件 - 别忘了重启 dev server，改 webpack 配置不会热更新
modifyVars 和 style-resources-loader 别混用
两者目标一致，但机制完全不同：modifyVars 是 less 编译器级注入，纯变量；style-resources-loader 是 webpack 层面的源码拼接，支持任何 Less 语法。强行共存会导致变量作用域混乱、mixin 冲突、甚至编译器 crash。
最容易被忽略的一点：如果你用的是 antd 或 vux 这类基于 Less 的 UI 库，它们的定制主题文档几乎都要求你走 modifyVars 路线——因为库内部大量依赖 @btn-primary-bg 这类变量名，而 style-resources-loader 导入的文件无法覆盖库源码里的同名变量。
- 只定制 UI 库主题 → 无条件选
modifyVars - 项目自有变量 + mixins + reset → 优先
style-resources-loader - 需要运行时换肤（如 localStorage 存 theme）→ 必须用
modifyVars配合构建多主题包，loader 方案做不到
