Add a file watcher for scss multiple outputs

In visual studio I was inefficiently compiling my scss using the gulp file:

 gulp.src('./wwwroot/scss/dark.scss')

        .pipe(gulpSass())

        .pipe(gulp.dest('./wwwroot/css'));

    gulp.src('./wwwroot/scss/light.scss')

        .pipe(gulpSass())

        .pipe(gulp.dest('./wwwroot/css'));

How can I implement the same functionality using file watchers?

I looked at:

https://www.jetbrains.com/help/rider/Transpiling_SASS_LESS_and_SCSS_to_CSS.html

But I cannot see how to specify the root scss file and two output files, only a scope