additionalData是唯一可靠路径，因Nuxt 3基于Vite，不支持webpack生态的style-resources-loader或css.loaderOptions；其值须为带分号的字符串、使用path.resolve的绝对路径、且.less扩展名不可省略。
直接用 vite.css.preprocessorOptions.less.additionalData 注入最稳，Nuxt 3（基于 Vite）不认 style-resources-loader，也不走 webpack 配置链路。
为什么 additionalData 是唯一可靠路径
Nuxt 3 的构建底层是 Vite，所有 CSS 预处理器配置必须走 vite.css.preprocessorOptions。webpack 时代的 css.loaderOptions.less.additionalData 或第三方 loader（如 style-resources-loader）在 Nuxt 3 中完全失效——不是“可能不生效”，而是压根不会被调用。
常见错误现象包括：
- 变量报
variable @primary-color is undefined - 重启 dev server 后仍无变化
- 控制台出现
Cannot find module "@/assets/styles/variables.less"
根本原因：Vite 不解析 @/ 别名，除非你手动 resolve 路径或配了别名插件。
立即学习“前端免费学习笔记（深入）”；
additionalData 配置必须满足的三个硬条件
哪怕只漏一个，变量就进不了编译流程：
-
additionalData值必须是字符串，且以@import开头，结尾必须带分号;（少一个分号，Less 编译器直接报语法错误） - 路径必须是 Node.js 可解析的绝对路径，不能写
@/assets/styles/variables.less（Vite 不认这个） - 文件扩展名
.less不能省略，@import "@/assets/styles/variables"会失败
正确写法示例（nuxt.config.ts）：
import { defineConfig } from 'nuxt/config'
import { resolve } from 'path'
export default defineConfig({
vite: {
css: {
preprocessorOptions: {
less: {
additionalData: `@import "${resolve(__dirname, 'src/assets/styles/variables.less')}";`
}
}
}
}
})
变量文件本身容易踩的坑
variables.less 看似简单，但内容一错，全局就崩：
- 只允许定义变量（
@xxx）、mixins（.xxx()）和注释；不能写任何实际 CSS 规则（比如.btn { color: red; }），否则会被注入到每个组件样式中，造成重复渲染和权重污染 - 避免嵌套
@import，例如在variables.less里再@import "colors.less"——additionalData只做顶层注入，子 import 是否成功取决于路径是否 resolve 正确，极易断裂 - 如果用了
@import (reference)引其他 mixin 文件，确保那个文件也只含定义，不含输出规则
一个安全的 variables.less 示例：
@primary-color: #2563eb;
@text-color: #1f2937;
@border-radius: 4px;
// mixins 可以放这里
.border-box() {
box-sizing: border-box;
}
开发时改了变量但没生效？先查这三件事
这不是缓存问题，而是构建链路卡点：
- 修改
nuxt.config.ts后必须重启nuxi dev，HMR 不监听配置变更 - 检查终端启动日志里有没有
[vite] warning: Failed to load url类提示，说明路径 resolve 失败 - 在任意
<style lang="less"></style>中临时写div { color: @undefined-var; }，看报错信息里是否显示变量名 —— 如果报的是undefined-var is undefined，说明注入成功；如果报的是ParseError或路径找不到，说明additionalData根本没跑进 Less 编译器
最隐蔽的问题：你在 variables.less 里写了 @import "~ant-design-vue/dist/antd.less" 这类第三方路径，而项目没配 alias 或 lessOptions.paths，Vite 就会静默失败。
