全局SCSS变量和mixin在组件中不可用，因Vite的additionalData需用绝对路径（如@import "./src/styles/variables.scss";），不支持@别名或相对路径，且须重启开发服务器生效。
全局SCSS变量和mixin在组件里用不了？检查additionalData路径是否相对根目录
直接在.svelte组件里写$primary-color报错，说明SCSS预处理器没把全局文件注入进去。Vite的css.preprocessorOptions.scss.additionalData只接受字符串，且路径是相对于项目根目录（即vite.config.js所在位置），不是组件路径，也不是@/别名。
常见错误：写成@import "@/styles/variables.scss"或@import "./src/styles/variables.scss"——前者@别名在SCSS上下文中不生效，后者./在某些Vite版本下解析失败。
- 正确写法必须用绝对路径：例如
@import "./src/styles/variables.scss";（注意结尾分号） - 确保
variables.scss本身不依赖其他未声明的导入，否则会静默失败 - 如果用了
@use语法（Dart Sass 1.33+），additionalData不支持，得降级回@import
vite.config.js里配了additionalData但热更新不生效？重启开发服务器
Vite对css.preprocessorOptions的变更不触发热重载，改完vite.config.js必须手动重启npm run dev，否则旧缓存还在用。
另外，additionalData只影响<style lang="scss">块和.scss文件，不影响<style>纯CSS或lang="css"——这点容易误判“配置失效”。
立即学习“前端免费学习笔记（深入）”；
- 验证方式：在任意
<style lang="scss">里直接写body { color: $primary-color; }，看是否编译通过 - 如果报
Undefined variable，先确认variables.scss里确实有$primary-color: #007bff;定义 - 别在
additionalData里写多行@import，Vite目前只认单行字符串，换行会中断解析
想用@styles别名导入SCSS？得配resolve.alias且仅限@import语句内
路径别名如@styles在JS/TS中有效，但在SCSS的@import里默认无效。必须显式告诉Vite：这个别名也要透传给Sass编译器。
配法是在vite.config.js里加css.preprocessorOptions.scss.additionalData的同时，补上scss的includePaths：
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@styles/variables.scss";`,
includePaths: [path.resolve(__dirname, 'src/styles')]
}
}
}
-
includePaths让Sass知道@styles指向哪里，additionalData里的@import "@styles/..."才能被识别 - 别名路径必须用双引号，单引号在某些Sass版本下会解析失败
- 如果同时用
additionalData和includePaths，两者路径要一致，否则变量还是找不到
全局SCSS生成的CSS体积变大？避免在additionalData里塞reset.scss
additionalData是每个SCSS文件都重复注入的内容，如果在里面@import "reset.scss"，相当于每个组件样式都复制一遍重置规则，打包后CSS体积会指数级膨胀。
真正需要全局生效的重置、字体、基础布局类，应该走独立CSS加载路径：
- 在
+layout.svelte顶部<script>里import '$lib/styles/reset.css' - 或者用
<link rel="stylesheet">引入，但必须确保路径经Vite处理（如import resetUrl from '$lib/styles/reset.css?url'） -
additionalData只放variables.scss、mixins.scss这类纯逻辑文件，不带实际CSS输出
变量和mixin本身不产生CSS，只有被调用时才展开；而reset.scss每行都是真实样式规则，重复注入等于重复生成。
