必须立即改用@use/@forward并规范函数调用，因dart sass≥1.23强制模块化，兼容模式仅是倒计时；@import和全局函数虽能运行但触发[global-builtin]警告，且3.0.0将直接报错中断构建。
弃用警告不是编译错误，但堆满终端、干扰排查，说明你正混用旧语法和新编译器——Dart Sass ≥1.23 已强制模块化，不改就等着 3.0.0 直接报错中断构建。
为什么@import和全局函数还在“工作”却狂报警告？
你当前处于 Dart Sass 的兼容模式：它一边把@import当文本拼接进文件（导致变量覆盖、重复解析），一边容忍lighten()、map-get()这类无命名空间调用，但每调一次就打一行[global-builtin]警告。这不是宽容，是倒计时。
-
@import "vars"→ 变量全塞进全局，两个$spacing定义谁后写谁生效，调试时找不到源头 -
lighten($c, 10%)→ 编译器知道你想用sass:color模块，但懒得帮你自动引入，只警告不代劳 - 第三方库（如旧版 Element Plus）若没升级，其内部 SCSS 也会触发警告，你改自己代码没用
必须立刻改的三处硬性语法点
这些不是风格建议，是 Dart Sass ≥2.0.0 的解析规则，错一个就编译失败。
-
@use必须是文件中第一个非注释、非空行；不能放在@if里，不能缩进，不能在选择器内部 - 路径不带扩展名和下划线：
@use "src/styles/variables"✅，@use "src/styles/_variables.scss"❌ -
@use "sass:color"之后，必须写color.lighten()，不能再写lighten()；math.div(10, 3)不能写10 / 3
Vite 中additionalData注入要合法且收敛
很多人想靠css.preprocessorOptions.sass.additionalData一键注入全局变量，但写错就白忙：
- 语句必须完整合法，结尾带分号：
@use "@/styles/variables" as v;❌漏分号会报expected ";" - 别混用
@import和@use：@import "vars"; @use "sass:math";→ Dart Sass 拒绝解析 - 多个文件要全局可用？别写多条
@use，建一个index.scss统一@forward，再@use "index" as *;
第三方库警告没法绕开，只能分层处理
Element Plus、Ant Design Vue 等若仍在用@import或fade-out()，你本地改不了源码，得用组合策略：
- 短期：确认 UI 库版本，升到已声明支持 Dart Sass 3.0 的版本（如 Element Plus ≥2.8.0）
- 中期：在
vite.config.ts中用additionalData注入兼容层，例如@use "sass:color" as color;，至少压住[global-builtin] - 长期：避免
as *，显式命名空间（如@use "element-plus/theme-chalk/common" as el;），防止变量冲突
最易被忽略的是：警告本身不会阻断构建，但它们像雪球——越积越多，直到某次 CI 自动拉取 Dart Sass 3.0.0，@import瞬间变Invalid CSS after "@import"，整个发布卡死。现在改，改的是语法；拖到那时，改的就是上线节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
