SCSS编译去警告，适配Sass新语法标准

Dart Sass 3.0.0 即将彻底废弃旧版语法，项目若未及时将 @import 替换为 @use/@forward、为全局函数（如 lighten、map-get、mix）添加模块前缀、并将裸除法 `/` 改为 `math.div()`，将直接编译失败；尤其棘手的是大量第三方 UI 库（如 element-plus、arco-design）尚未适配，需等待官方升级或临时降级至 sass@1.62.1 过渡——这不仅是一次语法迁移，更是一场涉及构建链路、依赖生态和团队协作的前端基建升级攻坚战。

直接改掉 @import、全局函数调用和除法符号，否则 Dart Sass 3.0.0 一发布，项目就编译失败。

替换所有 @import 为 @use 或 @forward

旧写法 @import "@/assets/css/variables.scss" 会触发 Deprecation Warning [import]，且 Dart Sass 3.0.0 将彻底移除支持。

• 最简迁移：用 @use "@/assets/css/variables.scss" as * 替代，保持变量/混合器全局可访问，不改后续引用
• 若想模块化控制作用域，去掉 as *，改用 @use "@/assets/css/variables" as vars，再通过 vars.$primary-color 调用
• @forward 适用于封装入口文件（比如统一导出 mixins + functions），但不能暴露变量，仅转发模块能力
• 第三方库（如 element-plus、element-ui）的 @import 报错，不能手动改 node_modules；优先等其发版，或临时锁定 sass 版本（见下文）

把全局函数调用改成模块前缀形式

像 lighten($color, 10%)、map-get($map, "key")、mix($a, $b, 50%) 这类写法，现在会报 Deprecation Warning [global-builtin]。

• 必须先 @use "sass:color"、@use "sass:map"、@use "sass:color" as color 等，再调用 color.lighten()、map.get()、color.mix()
• 常见映射：nth() → list.nth()（需 @use "sass:list"），round() → math.round()（需 @use "sass:math"）
• 第三方库内部用了全局函数（比如 element-plus 的 mix() 报错），你无法直接改；可临时降级 sass 到 1.62.1（最后一个支持全局函数的稳定版）

把 / 除法替换成 math.div()

SCSS 中用 100px / 4 这种写法，会触发 Using / for division is deprecated 警告，Dart Sass 2.0.0 就会报错。

• 必须引入模块：@use "sass:math"
• 把所有除法替换成 math.div(100px, 4)、math.div($grid-columns, 2) 等
• 注意：括号内参数类型要一致（比如不能 math.div(10, 2px)），否则运行时报错
• Vite / Vue CLI 项目中，如果在 additionalData 里注入全局变量，也要确保注入内容本身不带裸 /

临时规避方案：降级 Sass 或静默警告

不是所有项目都能立刻完成全量迁移，尤其当大量依赖未升级时，需要权衡节奏。

• 降级命令：npm uninstall sass && npm install sass@1.62.1 --save-dev，这是目前最稳的兼容版本
• Vite 用户可在 vite.config.ts 的 css.preprocessorOptions.scss 中加配置：api: 'modern-compiler' 和 silenceDeprecations: ['legacy-js-api', 'import', 'global-builtin']
• Webpack 用户需检查 sass-loader 版本是否匹配新 Sass API，旧版 loader 可能不识别 @use
• 静默只是掩盖问题，上线前仍需完成迁移——Dart Sass 3.0.0 已进入倒计时

真正麻烦的不是语法改写，而是第三方 UI 库主题文件里埋着的 @import 和全局函数。它们不会自动更新，得盯紧 element-plus、arco-design 等库的 changelog，或自己打 patch。

理论要掌握，实操不能落！以上关于《SCSS编译去警告，适配Sass新语法标准》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！