如何消除Gulp Sass任务中的Legacy JS API弃用警告

环境版本 #

• Node - v20.18.0
• Gulp - v5.0.0
• Gulp-Sass - v5.1.0
• Sass - v1.80.6

gulpfile.js 代码 #

const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
 
gulp.task("sass", function(){
  return gulp
    .src("./src/sass/*.scss")
    .pipe(sass())
    .pipe(gulp.dest("./dist/css"));
});

问题现象 #

运行gulp sass任务可成功完成，但每个SCSS文件都会触发一条弃用警告：

❯ gulp sass
[13:05:58] Using gulpfile ~\Dev\Udemy\Gulp4\Section2\gulpfile.js
[13:05:58] Starting 'sass'...
Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
More info: https://sass-lang.com/d/legacy-js-api
 
Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
 
More info: https://sass-lang.com/d/legacy-js-api
 
[13:05:58] Finished 'sass' after 87 ms

查阅过gulp-sass和sass的文档，尝试设置silenceDeprecations无效，多文件场景下警告刷屏，求可行解决方法。

目前gulp-sass v5.x版本仍依赖Sass的旧版JS API，因此触发该警告，以下是三种可行方案：

1. 升级gulp-sass至beta版本
   gulp-sass已推出适配Sass新API的beta版本，安装命令：

   npm install gulp-sass@beta --save-dev
   

   安装后无需修改原有gulpfile代码，警告会自动消失。

2. 通过环境变量屏蔽警告
   若不想升级，可在执行gulp命令时添加环境变量关闭Sass弃用警告：

   • Linux/macOS终端：

     SASS_SILENCE_DEPRECATIONS=legacy-js-api gulp sass
     

   • Windows PowerShell：

     $env:SASS_SILENCE_DEPRECATIONS="legacy-js-api"; gulp sass
     

3. 修改gulpfile配置（代码层面屏蔽）
   在引入sass时直接设置silenceDeprecations，需注意在初始化gulp-sass前配置：

   const gulp = require("gulp");
   const sass = require("sass");
   // 屏蔽旧API弃用警告
   sass.silenceDeprecations.add("legacy-js-api");
   const gulpSass = require("gulp-sass")(sass);
   
   gulp.task("sass", function(){
     return gulp
       .src("./src/sass/*.scss")
       .pipe(gulpSass())
       .pipe(gulp.dest("./dist/css"));
   });
   

内容的提问来源于stack exchange，提问作者Scott Smith