SCSS全局变量触发Deprecation Warning的根本原因是uni-app编译链中残留的@import语句（如vue.config.js、uni.scss或插件硬编码），而Sass 1.33+已弃用@import、强制使用@use；需升级sass≥1.33.0、在vite.config.ts中用@use替代@import并关闭logger警告。
为什么 SCSS 全局变量会触发 Deprecation Warning
控制台出现 Deprecation Warning [import]: Sass @import rules are deprecated，根本不是你写了 @import，而是 uni-app 编译链里某处（比如旧版 vue.config.js 配置、插件默认行为或 HBuilderX 模板）偷偷注入了 @import 语句。Sass 1.33+ 已正式弃用 @import，改用 @use，但很多项目仍残留旧配置。
vite.config.ts 中必须禁用 sass-loader 的警告日志
uni-app Vue3（Vite 模式）下，sass 和 sass-loader 的警告不会被自动压制，尤其当 additionalData 里用了 @import 或版本不匹配时，会持续刷屏。
- 确保
sass版本 ≥1.33.0（推荐1.89.2或更高），否则@use语法直接报错 - 在
vite.config.ts的css.preprocessorOptions.scss中显式关闭 logger：
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/styles/variables.scss" as *;',
// 关键：静默所有 Sass 警告
sassOptions: {
logger: {
warn: () => {},
debug: () => {}
}
}
}
}
}
- 不要用
prependData（那是 Webpack 时代的写法，Vite 下无效） - 如果用了
@import配置，必须先换成@use，否则关日志也压不住弃用警告
检查并清理残留的 @import 配置
常见“看不见”的 @import 来源：
-
vue.config.js文件里还留着css.loaderOptions.scss.prependData（Vite 模式下该配置完全被忽略，但 sass 仍会解析它触发警告） -
uni.scss文件本身用了@import引入其他文件（应全部改为@use） - HBuilderX 创建的老项目模板，默认在
vue.config.js写了prependData: '@import "@/uni.scss";' - 第三方插件（如某些主题包）内部硬编码了
@import
执行 npm list sass sass-loader @dcloudio/vue-cli-plugin-uni，确认没有混装多个 sass 版本；若有，统一降级到 sass@1.32.13 + sass-loader@10.2.1（仅限 Vue2 项目）。
立即学习“前端免费学习笔记（深入）”；
真正生效的 global SCSS 变量路径必须严格校验
哪怕只差一个字符，@use 就会 fallback 到 @import 行为，从而触发警告 —— 这是很多人忽略的关键点。
-
@/styles/variables.scss必须真实存在，且文件名大小写完全匹配（Windows 可能不敏感，Linux/macOS 和小程序构建机敏感） - 文件内禁止任何 CSS 规则（如
body { }）、禁止@forward嵌套过深、禁止末尾少分号 - IDE（如 VSCode）自动删掉
@use行末分号，会导致 Sass 静默失败，然后退化成@import并报 warning - 如果用 HBuilderX，别名
@/有时解析异常，可临时改用相对路径测试（如../src/styles/variables.scss）
变量文件内容示例（必须干净）：
$color-primary: #409eff; $font-size-base: 14px; $border-radius-sm: 2px;
多一层嵌套、多一个空格、少一个分号，都可能导致 warning 复现 —— 它不报错，但悄悄走降级路径。
