gulp-sass with browsersync inject not working - gulp

Question

// variable
// -----------------------------------------------------------------------------
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
// task
// -----------------------------------------------------------------------------
gulp.task('styles', function() {
return gulp.src([
'./src/assets/styles/*.scss'
], {
base: './src/assets/styles/'
})
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/assets/styles/'))
.pipe(browserSync.stream());
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: './dist/'
}
});
gulp.watch('./dist/*.html').on('change', browserSync.reload);
gulp.watch('./src/assets/styles/**/*.scss', ['styles']);
gulp.watch('./dist/assets/scripts/*.js').on('change', browserSync.reload);
});
How can make above code working? The scripts and html part working, but scss part not, when scss file change, styles task has start and finish with no error, the html file has body tag, but the browser do not inject the new css file.

Answer 1

Check this example, it may help you with a few tweaks in paths:
/**
* This example:
* Uses the built-in BrowserSync server for HTML files
* Watches & compiles SASS files
* Watches & injects CSS files
*/
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var gulp = require('gulp');
var sass = require('gulp-sass');
var filter = require('gulp-filter');
// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
// Sass task, will run when any SCSS files change.
gulp.task('sass', function () {
return gulp.src('scss/styles.scss')
.pipe(sass({includePaths: ['scss']})) // compile sass
.pipe(gulp.dest('css')) // write to css dir
.pipe(filter('**/*.css')) // filter the stream to ensure only CSS files passed.
.pipe(reload({stream:true})); // inject into browsers
});
// Default task to be run with `gulp`
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch("scss/*.scss", ['sass']);
});