gulp not injecting compiled css - gulp

Question

I am using browser-sync and sass among other plugins, but for some reason the browser-sync doesn't inject the css, the sass is getting compiled and being watched but that's it.
here is my gulp file:
'use strict';
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const pug = require('gulp-pug');
const browserSync = require('browser-sync').create();
const rename = require('gulp-rename');
const reload = browserSync.reload;
// Compile sass files to css
gulp.task('sass', function () {
return gulp.src('./assets/css/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 15 versions'],
cascade: true
}))
.pipe(gulp.dest('./site/css'))
.pipe(browserSync.stream())
});
// Compile pug files to html
gulp.task('pug', () =>{
return gulp.src('_pugfiles/*.pug')
.pipe(pug())
.pipe(gulp.dest('./_include'))
.pipe(gulp.dest('./site'))
});
gulp.task('js', function () {
gulp.src("./assets/js/function.js")
.pipe(rename("js/function.js"))
.pipe(gulp.dest("./site"));
});
// the working directory
gulp.task('browser-sync', ['sass', 'pug', 'js'] ,function() {
browserSync.init({
server: {
baseDir: "./site"
},
});
});
// Watch files compiling
gulp.task('watch', function () {
gulp.watch('./assets/css/*.sass', ['sass']);
gulp.watch('./_pugfiles/*.pug', ['pug']);
gulp.watch('./site/*.html').on('change', reload);
gulp.watch('./assets/js/*.js', ['js']);
gulp.watch('./site/js/*.js').on('change', reload)
});
gulp.task('default', ['watch', 'browser-sync']);
and this is my folder structure:
app
_include
_pugfiles
_site
_assets
css
img
js
node_modules
site
so here is what i have tried so far, rebuilding it again, removed few watch tasks
also tried .pipe(browsersync.stream({match: '**/*.css'})); and files: ['!**/*.maps.css'] to ignore css map files.
maybe i have tried other things but i can't remember, i spent most of yesterday trying to fix it.