可以使用gulp将带有特定变量的scss提取到css中吗？

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('compile-scss', function() {
  return gulp.src('path/to/scss/file.scss')
    .pipe(sass())
    .pipe(gulp.dest('path/to/output/folder'));
});

$primary-color: #ff0000;

.selector {
  color: $primary-color;
}

const gulp = require('gulp');
const sass = require('gulp-sass');
const replace = require('gulp-replace');

gulp.task('replace-variables', function() {
  return gulp.src('path/to/scss/file.scss')
    .pipe(replace('$primary-color', '#00ff00'))
    .pipe(gulp.dest('path/to/output/folder'));
});

gulp.task('compile-scss', gulp.series('replace-variables', function() {
  return gulp.src('path/to/output/folder/file.scss')
    .pipe(sass())
    .pipe(gulp.dest('path/to/output/folder'));
}));