Vue 3 中全局注入 Sass/Less 变量需通过构建工具配置：Vite 用 preprocessorOptions.additionalData（如 @use "@/styles/_variables.scss" as *;），Vue CLI 5+ 用 loaderOptions.sass.data 或 less.additionalData，注意路径别名、语法规范及避免常见坑。
Vue 3 项目中全局注入 Sass 或 Less 变量，核心是让每个 <style lang="scss"></style> 或 <style lang="less"></style> 块在编译前自动带上变量定义，而不是靠手动 @import。不同构建工具（Vite vs Vue CLI）配置方式不同，但逻辑一致：预处理器选项 + 正确路径 + 合法语法。
用 Vite 的 preprocessorOptions.additionalData（推荐）
这是当前最主流、最稳定的方式，适用于绝大多数 Vue 3 + Vite 项目。
-
Sass/SCSS 配置必须写在
scss字段下，不是sass（后者只处理缩进语法文件，极少使用） -
additionalData是字符串，内容会拼接到每个 SCSS 文件顶部；末尾要加分号，例如：@use "@/styles/_variables.scss" as *; - 路径支持
@/别名，但前提是vite.config.ts/js中已正确定义resolve.alias - 推荐用
@use ... as *而非@import，避免命名污染和循环依赖问题 - 如果变量文件内部还
@use了 mixins 或 functions，请确保它们在同一目录且路径可解析
用 Vue CLI 5+ 的 loaderOptions（仅限 Vue CLI 项目）
如果你仍在用 Vue CLI（非 Vite），配置位置和写法略有不同，且对预处理器类型有区分。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- Sass 使用
css.loaderOptions.sass.data，Less 使用css.loaderOptions.less.additionalData（注意字段名不统一） -
data中的路径可用~@/或@/别名（Vue CLI 默认支持），但需确保别名已注册 - Less 不支持
data字段，只能用additionalData；Sass 的additionalData在 CLI 中不生效，必须用data - 多个文件注入时，用
\n换行拼接，例如：`@import "@/styles/vars.scss";\n@import "@/styles/mixins.scss";`
别踩这些常见坑
很多配置看似正确却无效，往往卡在细节上。
立即学习“前端免费学习笔记（深入）”；
-
main.js 里 import 全局样式没用：它只让该文件参与编译，定义的变量不会透出到其他组件的
<style></style>块中 -
别名路径在 Vite 中不能直接用于
@import：Vite 的additionalData支持@/，但旧式@import "./src/styles/xxx.scss"必须用绝对路径或path.resolve -
mixins/function 无法调用？检查是否漏了
as *或@use顺序：Dart Sass 要求先@use再使用，且不能跨模块隐式访问 -
变量文件里不要写 CSS 规则：全局变量文件应只含
$xxx、@mixin、@function，混入实际样式会导致重复输出
验证是否成功的小技巧
配完别急着写业务，先快速验证变量是否真正全局可用。
- 在任意组件的
<style lang="scss"></style>中直接写color: $primary-color;，不加任何@use或@import - 打开浏览器开发者工具，检查该组件生成的 CSS 是否已替换为真实值（如
color: #1890ff） - 故意写一个不存在的变量（如
$xxx），看控制台是否报错 —— 报错说明注入机制已生效，只是变量名错了 - 在变量文件中加一行
@debug "loaded";，启动时终端若打印该信息，说明文件被正确加载
