你想在 Vite 创建的 Vue 项目中实现全局注入 SCSS 变量、混合器（Mixin），这样所有 Vue 组件的 SCSS 样式里无需手动 @import，就能直接使用这些全局的 SCSS 特性，不用重复引入，提升开发效率。我会给你分步讲解完整的配置方法，包含代码示例和避坑要点。
一、前置准备：安装 Sass 依赖
Vite 对 SCSS 的支持需要依赖 sass 包（无需安装 sass-loader，Vite 内置了对应的处理逻辑），先确保项目已安装：
# npm 安装
npm install sass --save-dev
# yarn 安装
yarn add sass --dev
# pnpm 安装（如果用pnpm）
pnpm add sass -D
二、步骤 1：创建全局 SCSS 文件
先在项目中新建存放全局 SCSS 变量/混合器的文件，建议目录结构：
src/
├── styles/ # 样式目录
│ └── variables.scss # 全局SCSS变量/混合器文件
├── vite.config.js # Vite配置文件
└── ...
在 src/styles/variables.scss 中写入全局变量、混合器示例：
// src/styles/variables.scss
// 1. 全局颜色变量
$primary-color: #9d60ff; // 主色调
$bg-color-main: #f9f6ff; // 页面背景色
$text-color: #333; // 主要文字色
// 2. 全局混合器（复用样式片段）
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
// 3. 全局通用样式（注意：这类样式不适合通过additionalData注入，后续说明）
// ❌ 不要在这里写全局CSS规则（如body{}），会被重复编译
// ✅ 只放变量、混合器、函数等“非输出型”SCSS特性
三、步骤 2：配置 Vite 实现全局注入（核心）
修改项目根目录的 vite.config.js（或 vite.config.ts），核心是配置 css.preprocessorOptions.scss.additionalData，实现全局注入：
完整配置示例（Vue3 + Vite）：
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 需引入path模块处理路径
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 路径别名配置（可选但推荐，@指向src目录）
resolve: {
alias: {
'@': path.resolve(__dirname, 'src') // 配置后可通过@/xxx访问src下的文件
}
},
// CSS预处理器配置（核心：全局注入SCSS）
css: {
preprocessorOptions: {
scss: {
// additionalData：在每个SCSS文件开头自动注入的代码
// 👉 关键：路径要正确，末尾加;避免语法错误
additionalData: `@import "@/styles/variables.scss";`,
// 可选：指定SCSS版本（一般无需配置）
// implementation: require('sass'),
}
}
}
})
关键配置说明：
additionalData：Vite 会在每个 SCSS 文件的开头自动插入这里的代码（比如@import全局变量文件），实现全局可用；- 路径写法：
- 用
@/styles/variables.scss：依赖resolve.alias中@指向src，简洁不易错； - 若未配置别名，用相对路径：
@import "./src/styles/variables.scss";（注意基于项目根目录）；
- 用
- 末尾分号：必须加
;，否则可能导致 SCSS 语法错误（比如多文件注入时）。
四、步骤 3：验证全局注入是否生效
无需重启 Vite 开发服务器（Vite 会热更新配置），直接在任意 Vue 组件中使用全局变量/混合器，不用手动 @import：
<template>
<div class="test-container">测试全局SCSS</div>
</template>
<style scoped lang="scss">
// 直接使用全局变量和混合器，无需@import
.test-container {
background: $bg-color-main;
color: $primary-color;
@include flex-center; // 使用全局混合器
width: 100%;
height: 200px;
}
</style>
运行项目后，若样式正常生效（背景色、文字色、flex居中），说明全局注入成功。
五、常见问题与避坑要点
路径错误导致注入失败：
- 检查
additionalData中的路径是否正确（比如@是否配置别名、文件名是否写错）； - 可临时用绝对路径测试：
@import "${path.resolve(__dirname, 'src/styles/variables.scss')}";（仅调试用）。
- 检查
全局样式（如 body{}）不要放变量文件：
additionalData会在每个 SCSS 文件开头注入代码，若在variables.scss中写body { margin: 0; }，会被重复编译多次，导致样式冗余；- 全局 CSS 规则（如重置样式、通用布局）：单独建
src/styles/global.scss，在main.js中直接引入：// src/main.js import { createApp } from 'vue' import App from './App.vue' import '@/styles/global.scss' // 引入全局样式文件 createApp(App).mount('#app')
多文件全局注入：
若有多个全局 SCSS 文件（如变量、混合器分开），用分号分隔：additionalData: `@import "@/styles/variables.scss"; @import "@/styles/mixins.scss";`,TypeScript 项目的路径提示：
若用 TypeScript，可在tsconfig.json中配置paths同步别名，避免路径报错：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }
总结
- 核心前提：安装
sass依赖，Vite 无需额外装sass-loader； - 关键配置：在
vite.config.js的css.preprocessorOptions.scss.additionalData中注入全局 SCSS 文件； - 路径技巧：配置
@别名指向src，简化路径书写，避免错误； - 边界注意：全局注入仅用于变量/混合器，全局 CSS 规则需在
main.js中直接引入。
按这个流程配置后，你所有 Vue 组件的 SCSS 样式都能直接使用全局变量和混合器，无需重复引入，大幅提升样式开发效率。
