必须用 vite.css.preprocessoroptions.scss.additionaldata，因为它是 nuxt 3 中唯一能在每个组件 编译前自动注入 scss 变量和 mixin 的方式，其他方案均无效或已废弃。
additionalData 是唯一可靠路径，别试 style-resources 或 css: ['@/assets/...'] —— 前者在 Nuxt 3 中已废弃，后者只注入 CSS 规则，不暴露 SCSS 变量/Mixin 给组件内 <style lang="scss"></style> 使用。
为什么必须用 vite.css.preprocessorOptions.scss.additionalData
Nuxt 3 的构建底层是 Vite，而 Vite 的 SCSS 处理逻辑只认 additionalData：它会在每个 .vue 文件的 <style lang="scss"></style> 内容**编译前自动拼接一段字符串**。只有这样，$color-primary、@include flex-center 才能在组件样式里直接用。其他方式（比如把变量文件塞进 css: [] 数组）只会把它当普通 CSS 加载，变量根本不会被解析。
-
css: ['@/assets/styles/variables.scss']→ 编译成独立 CSS，变量丢失 -
style-resources模块 → Nuxt 3 不兼容，安装后无效果 - 在
App.vue里@import→ 每个组件仍需手动 import，没解决“全局”问题
additionalData 路径写法必须带引号和分号
错误示例：additionalData: '@import "@/assets/styles/variables.scss"'（缺分号）会导致编译报错 Invalid CSS after "...": expected 1 selector or at-rule, was ";"；路径没加引号则会被当成 Sass 变量名解析。
- ✅ 正确写法（推荐单引号包裹整个字符串，路径用双引号）：
additionalData: `@import "@/assets/styles/variables.scss";` - ✅ 也可用双引号包裹整个字符串，路径用单引号：
additionalData: "@import '@/assets/styles/variables.scss';" - ❌ 错误：
additionalData: '@import "@/assets/styles/variables.scss"'（末尾无分号） - ❌ 错误：
additionalData: '@import @/assets/styles/variables.scss;'（路径没引号）
变量文件里不能写实际 CSS 规则
variables.scss 必须只包含“非输出型”内容：变量（$xxx）、混合器（@mixin xxx）、函数（@function xxx）。一旦写了 body { margin: 0 } 这类规则，就会被重复注入到每个组件样式中，造成样式污染和体积膨胀。
- ✅ 允许：
$primary: #42b883;、@mixin clearfix { &::after { content: ""; display: table; clear: both; } } - ❌ 禁止：
html { box-sizing: border-box; }、.btn { padding: 8px 16px; } - ? 全局 CSS 规则应单独放
assets/css/global.css，再通过css: ['@/assets/css/global.css']引入
路径别名 @ 在 additionalData 中可用但需确认配置
Nuxt 3 默认启用 @ 指向 src/，但 additionalData 是 Vite 层配置，依赖 Vite 的 alias 是否同步生效。如果报错 File to import not found，优先检查 vite.resolve.alias 是否显式声明了 @：
export default defineNuxtConfig({
vite: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/assets/styles/variables.scss";`
}
}
}
}
})
没配 resolve.alias 时，改用相对路径（如 ../assets/styles/variables.scss）或绝对路径（/src/assets/styles/variables.scss）更稳妥。
真正容易被忽略的是：additionalData 注入的是字符串，不是文件内容；所以变量文件一旦修改，必须重启 dev server 才能生效——热更新不触发重新注入逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
