uniapp 升级基座后出现sass @import语法警告如何屏蔽？应该降级到哪个版本？

在uniapp项目中将HBuilderX基座升级后，编译时频繁出现"Sass @import语法警告"，提示某些scss文件的导入方式已弃用。目前项目无法正常运行，请问如何屏蔽这些警告信息？如果必须降级处理，应该回退到哪个具体版本才能避免这个问题？当前使用的是最新版HBuilderX 3.6.18。

2 回复

升级基座后出现sass警告，可在manifest.json中配置忽略：

"h5": {
  "devServer": {
    "disableHostCheck": true,
    "clientLogLevel": "none"
  }
}

建议升级到HBuilderX 3.4+版本，不要降级。新版本已修复此问题。


在 UniApp 升级基座后，如果遇到 Sass @import 语法警告，这通常是因为新版基座（如 HBuilderX 3.6+）默认启用了 Dart Sass，而旧版使用 Node Sass。Dart Sass 已弃用 @import 语法，推荐使用 @use 或 @forward 替代。以下是解决方案：

1. 屏蔽警告（临时解决）

在项目的 vue.config.js 文件中配置 Sass 选项，忽略 @import 弃用警告：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        sassOptions: {
          silenceDeprecations: ['legacy-import']
        }
      }
    }
  }
};

如果项目没有 vue.config.js，请在根目录创建该文件并添加上述代码。

2. 推荐：升级语法（长期解决）

逐步将 @import 替换为 @use 或 @forward，例如：

  • 原代码：@import 'variables';
  • 新代码：@use 'variables'; 这能避免未来兼容性问题。

3. 降级基座版本（不推荐）

如果必须降级，可尝试回退到 HBuilderX 3.4.x 或更早版本（这些版本默认使用 Node Sass）。但降级可能导致其他功能缺失或安全风险，建议优先修复语法。

总结

  • 首选方案：更新 Sass 语法至 @use/@forward。
  • 临时方案：通过配置屏蔽警告。
  • 避免降级，除非有特定兼容需求。如有问题，检查 UniApp 官方文档或社区更新。
回到顶部