必须配置css.preprocessoroptions.scss.additionaldata并设为@use "@/styles/variables.scss" as *;，否则scss变量无法全局使用；需确保alias正确、末尾加分号、variables.scss不含css规则、组件style标签声明lang="scss"且重启服务。
不能直接在纯 CSS 中用 $xxx 变量——Sass 变量只在 SCSS 编译期生效，CSS 本身不支持。所谓“在 CSS 中直接使用”，实际是指所有 <style lang="scss"></style> 块里能免 @use 直接写 $primary-color。
为什么 additionalData 不生效？先查这三处
90% 的失败不是 Vite 版本问题，而是注入链被破坏：
-
additionalData字符串末尾漏了分号（;）——SCSS 解析器会把组件里的第一行样式拼进来，报Invalid CSS或unexpected token - 路径用了
@/别名，但vite.config.ts里resolve.alias没配、配晚了、或没指向src根目录 -
variables.scss文件里写了body { margin: 0; }这类实际输出 CSS 的规则——它会被重复注入到每个<style lang="scss"></style>开头，造成样式冗余和权重混乱，还不报错
css.preprocessorOptions.scss.additionalData 必须这么写
配置入口必须是 scss，不是 sass（后者只管缩进语法文件，且 additionalData 支持不稳定）：
export default defineConfig({
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/variables.scss" as *;`
}
}
}
})
- 字符串必须用反引号（
`）包裹，保证换行和引号不出错 - 路径必须以
@/开头（依赖alias），不能用相对路径如./src/styles/variables.scss - 必须用
@use ... as *，不是@import（Dart Sass 已弃用，会警告并静默忽略） - 必须重启开发服务器——热更新不触发
additionalData重载
variables.scss 文件里只能放什么？
它不是普通样式文件，是纯模块（module），只定义，不渲染：
- ✅ 允许：
$color-primary: #409eff;、@mixin flex-center { ... }、@function px2rem($px) { ... } - ❌ 禁止：
body { margin: 0; }、.reset { padding: 0; }、@debug "test";、中文注释、BOM 头、未闭合的/* - 如果需要全局基础样式（重置、字体等），单独建
base.scss，并在main.ts或App.vue的<style lang="scss"></style>里显式@use
<style></style> 标签必须声明 lang="scss"
只写 <style scoped></style> 默认是 CSS，SCSS 语法（包括变量）会被当成无效 CSS 忽略，控制台不报错，但样式不生效：
- ✅ 正确：
<style scoped lang="scss"></style>→color: $primary-color;能用 - ❌ 错误：
<style scoped></style>→$primary-color报Undefined variable，或直接当无效 CSS 丢弃 - scoped 不影响变量可用性——
additionalData注入的是预处理器上下文，与作用域无关
真正容易被忽略的，是 variables.scss 里混入了任何一行实际输出的 CSS 规则——它不会报错，但会让所有组件样式多出一段重复代码，调试时根本看不出来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
