Vite中全局引入SCSS变量必须通过css.preprocessorOptions.scss.additionalData配置实现，使用@use "@/styles/variables.scss" as *;注入，而非JS层import；需确保标签、sass已安装、别名正确且重启服务。
直接说结论：Vite 默认支持 SCSS，但“全局引入”不是指把 SCSS 编译成一份 CSS 文件再注入，而是让变量、mixin、函数在所有 中自动可用 —— 这需要靠 css.preprocessorOptions.scss.additionalData 配置实现，不是靠 import 或 @import。
为什么 import './styles/variables.scss' 在组件里不生效？
因为 import 是 JS 层行为，它会把 SCSS 文件当作模块加载并触发编译，但只影响当前组件的样式作用域；它不会把变量“注入”到其他组件的 SCSS 上下文中。更关键的是：如果你在组件里用 （没写 lang="scss"），那压根就不是 SCSS 语法，$color 会被当成无效 CSS 忽略，浏览器控制台也不报错 —— 这是最常卡住的地方。
常见错误现象：
- 写了
$primary-color却提示Undefined variable - 变量在某个组件里能用，换一个组件就报错
- 删了
node-sass重装sass后还是不生效
真正该做的是：确保所有 标签都带 lang="scss"，然后统一用 additionalData 注入。
vite.config.ts 中必须写的三行配置
这是唯一能让变量“随处可写”的方式，且必须严格按格式来：
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/variables.scss" as *;`
}
}
}
注意点：
- 路径
@/styles/variables.scss必须真实存在，且@别名已在resolve.alias中正确定义（通常指向src） - 必须用反引号包裹字符串，不能用单引号或双引号
- 必须用
@use ... as *，不是@import—— Vite 5+ + Sass 2.0+ 已默认禁用@import，会静默忽略 - 改完配置后必须重启开发服务器，热更新不触发
additionalData重载
SCSS 全局文件怎么组织才不容易乱？
推荐分层结构，避免所有东西堆在一个文件里：
-
variables.scss：只放$开头的变量（颜色、间距、z-index 等） -
mixin.scss：只放@mixin，比如@mixin flex-center -
functions.scss：只放自定义函数（如@function px2rem） -
index.scss：统一@use并导出，供additionalData引用
例如 index.scss 内容：
@use "./variables.scss" as *; @use "./mixin.scss" as *; @use "./functions.scss" as *;
然后 additionalData 只需引用这一个入口文件即可。这样后续增减功能，不用反复改配置。
生成的 CSS 文件在哪？怎么确认它真被打包进去了？
Vite 不会单独输出一个叫 “global.css” 的文件。它把所有 SCSS 编译结果（包括组件内 和全局变量参与生成的样式）合并进最终的 assets/index.[hash].css 里。验证方法：
- 构建后打开
dist/assets/，找那个最大的 CSS 文件 - 搜索其中是否存在你定义的变量展开后的值（比如搜
#42b883） - 如果用了
scoped，检查 class 名是否带了 data-v-xxx 属性，且对应样式存在
容易被忽略的一点：如果你在 main.ts 里又 import './assets/styles/index.scss'，会导致重复编译 —— Vite 会把这份 SCSS 单独打包成另一份 CSS，和组件样式分离，破坏一致性。全局变量注入 ≠ 全局样式导入，这两件事要分开处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
