vite中less全局变量需通过preprocessoroptions.less.additionaldata注入，必须用反引号包裹、@import后加分号、路径用@/且依赖alias配置，漏分号、路径错或未重启服务均导致失效。

直接装 less 和 less-loader，配好 vite.css.preprocessorOptions.less.additionalData 就能用，但漏掉分号、路径写错或没重启 dev server，变量就全失效。

安装 Less 依赖必须用 --save-dev

Less 是构建时依赖，不是运行时需要的，所以不能只装 less，还得装 less-loader（Vite 内置支持，但显式安装更稳）：

• npm install less less-loader --save-dev
• 如果用 pnpm：pnpm add less less-loader --dev
• 不装 less-loader 也可能“看起来能跑”，但 SSR 构建时（nuxi build）会报 Cannot find module 'less' 或编译中断

配置 vite.preprocessorOptions.less.additionalData 注入变量

这是全局 Less 变量生效的核心。Nuxt 3 的 Vite 配置必须写在 nuxt.config.ts 的 vite.css.preprocessorOptions.less 下，且 additionalData 字符串末尾必须带分号：

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

vite: {
  css: {
    preprocessorOptions: {
      less: {
        additionalData: '@import "@/assets/variables.less";'
      }
    }
  }
}

• 路径用 @/assets/variables.less（@ 指向 src/），不要写 ~/assets/... —— ~ 在 Vite 的 CSS 预处理器上下文中不被识别
• additionalData 是字符串拼接，不是模块导入，所以不能用 import 语法，也不能跨行写
• 末尾的 ; 缺失会导致 Less 编译器报错：ParseError: missing semicolon，尤其在变量文件里有注释或空行时更敏感

变量文件只能放 @ 变量，别混写样式规则

variables.less 必须是纯变量定义文件，否则会在每个组件样式中重复注入，造成样式污染或 FOUC：

• ✅ 正确写法：@primary-color: #2563eb;、@spacing-md: 16px;
• ❌ 错误写法：.btn { color: @primary-color; } 或 @import "./mixins.less"; —— 这些会被复制进每一个 <style lang="less"></style> 块里
• 如果真要复用样式片段，应该用 mixins.less 单独存，并在组件里手动 @import，而不是塞进 additionalData
• SSR 场景下，重复注入还会导致服务端渲染出的 CSS 体积膨胀、关键 CSS 提取失败

修改配置后必须重启 nuxi dev

Vite 不会监听 nuxt.config.ts 中的 vite.css 配置变更，改完不重启，变量永远不生效：

• 哪怕只是加了个分号，也得 Ctrl+C → nuxi dev
• HMR（热更新）对预处理器配置无效，这点和普通组件或 composables/ 完全不同
• 开发中发现变量突然“失效”，第一反应不是检查语法，而是先 kill 进程再重起

最易忽略的是 additionalData 字符串结尾那个分号，它不像 JS 那样自动加分号，Less 解析器会严格报错；还有就是路径里用了 ~/ 而不是 @/，这两个符号在 Nuxt 的不同上下文里含义完全不同。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！