在最新版vue（通过官方脚手架搭建，此刻最新为vue3.5，node版本为22）工程中使用sass的两个报错问题处理

一、Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

1.1 问题

在使用@import导入其它*.scss文件时，控制台报警告信息：Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

如下图所示：

此时会在控制报警告信息：

原因：在sass 1.80及以上版本中使用@import导入文件已不在被支持。

1.2 解决

在index.scss文件中导入其它*.scss文件时，使用@use导入，而不在使用@import，如下图所示：

二、The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

2.1 问题

控制台报警告信息：Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. 意思是：旧版JS API已弃用，并将在Dart Sass 2.0.0中删除。

2.2 解决

(1) 在vite.config.js文件中增加配置：

css: { 
    preprocessorOptions: { 
        scss: { 
            api: 'modern-compiler', // or 'modern' 
        }, 
    }, 
}

(2) 也可以使用sass旧版api，这样控制台也会消除警告，配置如下：

css: { 
    preprocessorOptions: { 
        scss: { 
            silenceDeprecations: ['legacy-js-api'] 
        }, 
    }, 
}