Vue 3 项目怎么配置全局 Sass / Less 样式变量注入-Vue.js-PHP中文网

Vue 3 中全局注入 Sass/Less 变量需通过构建工具配置：Vite 用 preprocessorOptions.additionalData（如 @use "@/styles/_variables.scss" as *;），Vue CLI 5+ 用 loaderOptions.sass.data 或 less.additionalData，注意路径别名、语法规范及避免常见坑。

vue 3 项目怎么配置全局 sass / less 样式变量注入

Vue 3 项目中全局注入 Sass 或 Less 变量，核心是让每个或块在编译前自动带上变量定义，而不是靠手动 @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 全局样式没用：它只让该文件参与编译，定义的变量不会透出到其他组件的块中
别名路径在 Vite 中不能直接用于 @import：Vite 的 additionalData 支持 @/，但旧式 @import "./src/styles/xxx.scss" 必须用绝对路径或 path.resolve
mixins/function 无法调用？检查是否漏了 as * 或 @use 顺序：Dart Sass 要求先 @use 再使用，且不能跨模块隐式访问
变量文件里不要写 CSS 规则：全局变量文件应只含 $xxx、@mixin、@function，混入实际样式会导致重复输出