Sass变量无法在纯CSS文件中使用，仅支持<style lang="scss">块；必须通过css.preprocessorOptions.scss.additionalData配置@use "@/styles/variables.scss" as *;实现全局访问，且需确保别名路径正确、变量文件无CSS规则、末尾加分号并重启服务。
不能直接通过 Sass 配置让 CSS 文件使用 $xxx 变量 —— CSS 本身不支持 Sass 语法，$color-primary 在纯 .css 文件里永远会报错。所谓“全局引入 Sass 变量”，实际是指：所有 <style lang="scss"> 块能免 @use 直接访问 $xxx、@mixin、@function。关键在 css.preprocessorOptions.scss.additionalData 配置是否生效。
为什么 additionalData 不生效？先查这三处
90% 的失败不是 Vite 版本问题，而是注入链被破坏：
-
additionalData字符串末尾漏了分号（;）——SCSS 解析器会把组件里第一行样式拼进来，报Invalid CSS或unexpected token - 路径用了
@/别名，但vite.config.ts中resolve.alias没配、配晚了、或没指向src根目录 -
variables.scss文件里写了body { margin: 0; }这类实际输出 CSS 的规则——它会被重复注入到每个<style lang="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 "@/styles/variables.scss" 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"> 里显式 @use。
<style> 标签必须声明 lang="scss"
只写 <style scoped> 默认是 CSS，SCSS 语法（包括变量）会被当成无效 CSS 忽略，控制台不报错，但样式不生效。
- 正确写法：
<style lang="scss" scoped> - 错误写法：
<style scoped>（此时$primary-color完全无效）
真正容易被忽略的是：Sass 变量只在编译期生效，无法用于运行时换肤；想动态改色，得靠 CSS 自定义属性（--color-primary）配合 JS 设置，而不是指望 additionalData 注入后还能改值。
