必须用additionalData注入@use "@/styles/variables.scss" as *;，因Dart Sass弃用@import，且@use支持模块化、避免冲突；路径须为@/别名、末尾带分号和换行，variables.scss只能含变量/混入/函数，禁写CSS规则。
必须用 css.preprocessorOptions.scss.additionalData 注入 @use，否则变量和 @mixin 在组件 <style lang="scss"></style> 里无法直接使用——这不是“配不配得上”的问题，而是 Sass 编译流程决定的硬限制。
为什么 additionalData 必须写 @use 而不是 @import
Dart Sass（Vite 默认使用的编译器）已正式弃用 @import，继续用会导致警告甚至静默失效。而 @use 是模块化引入，能避免变量覆盖、命名冲突，且支持 as * 直接挂载到全局作用域。
-
@use "@/styles/variables.scss" as *;—— 变量可直接写$primary-color，无需前缀 - 路径必须以
@/开头，且vite.config.ts中resolve.alias必须正确定义@指向src根目录 - 字符串末尾必须加分号
;和换行\n，否则会和组件内第一行样式拼成非法语法，报Invalid CSS after ... - 不能用相对路径如
./src/styles/variables.scss：Vite 不在additionalData字符串中解析相对路径
variables.scss 文件里只能放什么
它不是普通样式文件，是纯 Sass 模块（module），只负责定义，不输出任何 CSS 规则。一旦写了 body { margin: 0; } 这类语句，就会被重复注入到每个 <style lang="scss"></style> 块开头，造成样式冗余、权重错乱，还不报错。
- ✅ 允许：
$color-primary: #409eff;、@mixin flex-center { ... }、@function px2rem($px) { ... } - ❌ 禁止：
body { ... }、.reset { ... }、@debug、@warn、中文注释、BOM 头、未闭合的/* - 全局基础样式（如 reset、base）必须单独建文件（如
base.scss），并在main.ts或App.vue的顶层<style lang="scss"></style>中显式@use或@import
为什么 @mixin 在构建时报 Undefined mixin
不是配置错了，是 SCSS 代码组织违反了编译单元约束。Vite 构建时会把所有 .scss 提取合并，但不保证定义和调用在同一个编译上下文中——additionalData 注入的是前置代码，而组件里的 @include 是另一个独立单元。
立即学习“前端免费学习笔记（深入）”；
- 所有
@mixin、@function、$var必须集中在一个入口文件（如src/styles/index.scss）里定义 - 该文件只做定义，不写任何 CSS 规则；其他地方统一
@use "@/styles/index.scss" as *; - 如果用了 CSS Modules（如
Button.module.scss），additionalData注入的内容默认不生效，需在该文件顶部手动@use - 别在
additionalData里直接调用@include：它只负责“声明”，不负责“执行”
lang="scss" 必须显式声明，否则变量无效
<style></style> 标签默认按纯 CSS 解析，SCSS 语法（包括 $xxx、@mixin）会被当成无效 CSS 忽略，连报错都不会有。
- 所有需要使用 Sass 特性的
<style></style>块，必须写<style lang="scss"></style>，哪怕只是加个scoped -
<style scoped></style>≠<style lang="scss" scoped></style>：前者是 CSS，后者才是 SCSS - Vue 单文件组件中，
<style lang="scss"></style>和<style lang="scss" scoped></style>都能访问additionalData注入的变量，但:deep()等 Vue 特殊选择器在@use后可能失效，需额外测试
最容易被忽略的一点：改完 vite.config.ts 里的 additionalData，必须重启开发服务器——热更新不会重新加载这个配置。还有，variables.scss 里哪怕只多一个空格或 BOM 头，都可能导致整个 Sass 编译链静默失败。
