I can't get gulp-sass to compile SCSS to update the css after I make changes . It only says as "watch"

Question

So for some reason when I run npm run watch it looks like its working, then I do changes on my SCSS but nothing updates on /assets/css. The paths are right, so i am sure there is no mistake there.

 const gulp = require( 'gulp' ),
        fancylog = require( 'fancy-log' ),
        browserSync = require( 'browser-sync' ),
        server = browserSync.create(),
        dev_url = 'http://localhost/starter-bootstrap';
    
    
    /**
     * Define all source paths
     */
    
    var paths = {
        styles: {
            src: './assets/*.scss',
            dest: './assets/css'
        },
        scripts: {
            src: './assets/*.js',
            dest: './assets/js'
        }
    };
    
    
    /**
     * Webpack compilation: http://webpack.js.org, https://github.com/shama/webpack-stream#usage-with-gulp-watch
     * 
     * build_js()
     */
    
    function build_js() {
        const compiler = require( 'webpack' ),
            webpackStream = require( 'webpack-stream' );
    
        return gulp.src( paths.scripts.src )
            .pipe(
                webpackStream( {
                    config: require( './webpack.config.js' )
                },
                    compiler
                )
            )
            .pipe(
                gulp.dest( paths.scripts.dest )
            )
            /*.pipe(
                server.stream() // Browser Reload
            )*/;
    }
    
    
    /**
     * SASS-CSS compilation: https://www.npmjs.com/package/gulp-sass
     * 
     * build_css()
     */
    
    function build_css() {
        const sass = require( 'gulp-sass' )( require( 'sass' ) ),
            postcss = require( 'gulp-postcss' ),
            sourcemaps = require( 'gulp-sourcemaps' ),
            autoprefixer = require( 'autoprefixer' ),
            cssnano = require( 'cssnano' );
    
        const plugins = [
            autoprefixer(),
            cssnano(),
        ];
    
        return gulp.src( paths.styles.src )
            .pipe(
                sourcemaps.init()
            )
            .pipe(
                sass()
                    .on( 'error', sass.logError )
            )
            .pipe(
                postcss( plugins )
            )
            .pipe(
                sourcemaps.write( './' )
            )
            .pipe(
                gulp.dest( paths.styles.dest )
            )
            /*.pipe(
                server.stream() // Browser Reload
            )*/;
    }
    
    /**
     * Watch task: Webpack + SASS
     * 
     * $ gulp watch
     */
    
    gulp.task( 'watch',
        function () {
            // Modify "dev_url" constant and uncomment "server.init()" to use browser sync
            /*server.init({
                proxy: dev_url,
            } );*/
    
            gulp.watch( paths.scripts.src, build_js );
            gulp.watch( [ paths.styles.src, './assets/scss/*.scss' ], build_css );
        }
    );

This is what my screen shows:

fjimenez@ADV-SLC-FJIMENEZ:/mnt/c/Users/FernandoJimenez/Local Sites/newtheadvocatescom/app/public/wp-content/themes/the-advocates-theme$ npm run watch

> [email protected] watch /mnt/c/Users/FernandoJimenez/Local Sites/newtheadvocatescom/app/public/wp-content/themes/the-advocates-theme
> gulp watch

[13:12:35] Using gulpfile /mnt/c/Users/FernandoJimenez/Local Sites/newtheadvocatescom/app/public/wp-content/themes/the-advocates-theme/gulpfile.js
[13:12:35] Starting 'watch'...

So every time I hit Ctrl + S it doesn't do anything like it used to. I am using WSL 2 with Ubuntu 20.4