less-loader@8 的 lessOptions 必须显式包裹，javascriptEnabled: true 或 paths: [] 须置于 lessOptions 对象内，否则触发 ValidationError 构建失败；math: 'always' 是 less@4.2.0+ 新增开关，影响单位计算；paths 需绝对路径，不识别 @/ 别名；Vue CLI 推荐用 css.loaderOptions.less.additionalData 注入变量，支持 @/ 别名和 .less 后缀；Vite 中 additionalData 必须用 path.resolve(__dirname, ...) 绝对路径；避免 modifyVars 与 additionalData 共存；引入组件库 Less 时需按变量→自定义→组件样式顺序导入，并加前缀防冲突；优先用 CSS 规则覆盖组件样式而非修改其变量。
less-loader@8 的 lessOptions 必须显式包裹
直接写 javascriptEnabled: true 或 paths: [] 会触发硬性报错：ValidationError: Invalid options object，编译中断。这不是警告，是构建失败。
所有 Less 编译选项必须收进 lessOptions 对象里：
{ loader: 'less-loader', options: { lessOptions: { javascriptEnabled: true, paths: [path.resolve(__dirname, 'src/styles')], math: 'always' } } }-
math: 'always'是 less@4.2.0+ 新增的默认行为开关；若项目依赖旧版单位推导（如@n * 2px），不设此项会导致计算结果为空 -
paths用于支持@import "variables.less"这类相对路径，但注意：它和 Webpack 的resolve.alias无关，必须填文件系统绝对路径 - 别名如
@/styles/variables.less在lessOptions.paths里无效，Less 解析器根本不识别@/
Vue CLI 中用 additionalData 注入变量最稳
Vue CLI 项目推荐走 css.loaderOptions.less.additionalData，不用额外装插件，也不受 style-resources-loader 的路径别名兼容问题干扰。
配置示例（vue.config.js）：
立即学习“前端免费学习笔记（深入）”；
module.exports = { css: { loaderOptions: { less: { additionalData: `@import "@/styles/variables.less";` } } } }- 路径支持
@/别名（前提是 Vue CLI 默认 alias 指向src），但必须带.less后缀，@import "@/styles/variables"会静默失败 - 多个文件用分号拼接：
`@import "@/styles/variables.less"; @import "@/styles/mixins.less";` - 该方式对
<style lang="less" scoped>同样生效，变量和 mixin 都可直接用
Vite 中 additionalData 必须用绝对路径
Vite 的 preprocessorOptions.less.additionalData 不识别别名，@/ 或 ~/ 写法会静默跳过 variables.less，导致变量 undefined。
正确写法（vite.config.ts）：
import path from 'path'
export default defineConfig({ css: { preprocessorOptions: { less: { additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";` } } } })- 必须
import path from 'path'，且始终以__dirname为基准，避免process.cwd()在 monorepo 中指向错误目录 - 验证是否生效：在
variables.less顶部加@debug "loaded";，启动开发服务器看控制台是否有输出 - 不要同时配
modifyVars和additionalData——前者只影响顶层入口，后者才是真全局注入；二者共存时，additionalData导入的内容优先级更高
避免组件库变量污染的关键动作
引入 Ant Design、Arco 等组件库的 Less 时，它们自带的 @primary-color 会按 @import 顺序覆盖你自己的定义，不是 bug，是 Less 的线性展开机制。
- 不要在业务样式里写
@import "antd/lib/style/index.less"后再试图重定义变量；应严格按官方顺序：先@import "~antd/lib/style/themes/default.less"（只载入变量），再@import你的variables.less，最后@import组件样式 - 自己的变量文件建议加命名前缀（如
@my-brand-primary），避免和组件库同名变量冲突 - 想改组件样式，优先写 CSS 规则（如
.ant-btn { border-radius: 4px; }），而不是动它的@border-radius-base——后者依赖构建链路，且容易引发连锁覆盖
最容易被忽略的是 lessOptions.paths 和 additionalData 的路径语义差异：前者只为 Less 解析 @import 提供查找目录，后者注入的内容仍要靠 Less 自己解析路径。两者都填错，变量就彻底“看不见”。
