使用Gulp编译SASS时出现Legacy JS API弃用警告如何解决？

问题根源 #

你遇到的警告是因为当前使用的gulp-sass@5.x内部仍在调用Dart Sass的旧版JS API，而Dart Sass 1.81.0已明确该API将在2.0.0版本移除。以下是两种从根源解决问题的方案：

方案一：直接使用Dart Sass官方API编写Gulp任务 #

绕开gulp-sass，直接调用Dart Sass提供的新API（compileAsync）实现编译，完全避免旧API的使用：

修改后的gulpfile.js #

const gulp = require('gulp');
const sass = require('sass');
const rename = require('gulp-rename'); // 可选，用于指定输出文件名
const sourcemaps = require('gulp-sourcemaps'); // 可选，如需生成sourcemap

const theme = {
    css : {
        src     : './assets/sass/app.scss',
        dist    : './dist/css'
    }
};

const sassOptions = {
    outputStyle: 'compressed',
};

const themeSass = async function() {
    // 使用Dart Sass新API编译
    const result = await sass.compileAsync(theme.css.src, sassOptions);
    
    return gulp.src(theme.css.src)
        // 如需sourcemap，取消下方注释
        // .pipe(sourcemaps.init())
        .pipe(rename('app.css'))
        .pipe(gulp.dest(theme.css.dist))
        // .pipe(sourcemaps.write('.'))
        // .pipe(gulp.dest(theme.css.dist))
};
themeSass.displayName = 'sass:theme';

exports.sass = gulp.parallel(themeSass);
exports.default = gulp.series(gulp.parallel(themeSass));

依赖安装（如需可选功能） #

如果需要sourcemap或重命名功能，执行：

npm install --save-dev gulp-sourcemaps gulp-rename

方案二：替换为适配新API的Gulp Sass插件 #

改用gulp-dart-sass，该插件专门针对Dart Sass新API开发，用法与原gulp-sass完全兼容：

1. 卸载旧插件

npm uninstall gulp-sass

2. 安装新插件

npm install --save-dev gulp-dart-sass

3. 修改gulpfile.js引入
   仅需替换gulp-sass的引入行，其余代码保持不变：

const gulp = require('gulp');
const gulpSass = require('gulp-dart-sass'); // 替换原require('gulp-sass')(require('sass'))

方案说明 #

以上两种方案均直接使用Dart Sass官方推荐的新API，而非旧版废弃接口，从根源消除了弃用警告，无需依赖silenceDeprecations选项。

内容的提问来源于stack exchange，提问作者Micke Hasselqvist