additionaldata必须置于sassoptions内才生效，旧版顶层配置被忽略；需用@use "@/styles/vars.scss" as *;带分号写法，路径须经@/别名解析，且vars.scss中仅允许定义变量/混入/函数，禁止css规则。
升级到 sass-loader@13 后 additionalData 不生效，不是配置漏写了，而是字段位置、语法、作用域三者全变了——旧版直接挂在 loader options 顶层的写法，新版必须塞进 sassOptions，且 @use 的模块行为也更严格。
additionalData 必须移到 sassOptions 里，否则直接被忽略
新版 sass-loader@13+ 把所有 Sass 编译相关配置（包括 additionalData、includePaths、outputStyle）统一收口到 sassOptions 对象下。写在顶层会被完全无视，不报错，但也不生效。
- ❌ 错误写法：
additionalData: `@use "@/styles/vars.scss" as *;`（顶层字段） - ✅ 正确写法：
sassOptions: { additionalData: `@use "@/styles/vars.scss" as *;` } - Webpack 配置中还要确保
implementation: require("sass")显式指定，避免 fallback 到已废弃的node-sass
@use as * 必须带分号，且路径要能被 alias 解析
additionalData 是字符串拼接进每个 SCSS 文件顶部的，语法必须合法。漏分号、路径别名没配、或用了相对路径，都会导致注入失败——Sass 编译器静默跳过，变量就“消失”了。
- 分号不能省：
`@use "@/styles/vars.scss" as *;`（结尾必须有;） - 路径必须用
@/开头，且vite.config.ts或vue.config.js中resolve.alias已正确定义@指向src/ - 别用
./src/styles/vars.scss：Webpack/Vite 不会自动解析这种相对路径，alias 也没法介入
vars.scss 文件里只能放定义，不能有 CSS 规则
additionalData 是把整段内容插入每个 <style lang="scss"></style> 块开头。如果 vars.scss 里写了 body { margin: 0; } 这类规则，它就会在每个组件样式里重复出现，不仅污染输出，还可能触发 Sass 编译错误或权重冲突。
- ✅ 允许：
$primary-color: #409eff;、@mixin clearfix { ... }、@function px2rem($px) { ... } - ❌ 禁止：
html { box-sizing: border-box; }、.reset { padding: 0; } - 验证方式：打开构建产物中的任意一个
.css文件，搜body {—— 如果出现多次，说明vars.scss里混入了渲染型代码
Vue 单文件组件必须显式声明 lang="scss"
即使全局配了 additionalData，<style></style> 块仍可能绕过 SCSS 编译流程。最常踩的坑是忘了写 lang="scss"，Vite/webpack 就当纯 CSS 处理，$color 直接原样输出，浏览器报无效属性值。
- ❌
<style scoped></style>→ 被当 CSS，变量不编译 - ✅
<style lang="scss" scoped></style>→ 正确走 Sass 流程 - scoped + module 混用时，Vite 优先走 CSS Modules，SCSS 变量注入失效，二者不可共存
最容易被忽略的是：修改 vars.scss 后，已打开的 Vue 组件可能因 HMR 缓存没重载 <style></style> 块，变量更新不生效——得手动刷新页面或关掉 HMR 测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
