How to compile scss to css on npm start

Question

I am unable to compile scss files to css once the application is run using npm start. Is there a way to live reload a sass to css like ts are compiled to js by utility tsc:w.So I have to stop the build and then do gulp watch or node-sass command to compile scss to css and then build solution again using npm start. I tried below approaches but none worked. Here is the code in package.json:

Using gulp watch:

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" \"gulp\" ", 
//also tried gulp watch and that did not work too.
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" \"gulp watch\" ",

here is my gulppfile.js in the root directory:

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

Using node-sass command:

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run sass\" ",             
"sass": "node-sass -w app/sass/ -o app/css/",

Could anyone pls tell what I am missing or what is the right way to do it? TIA

Answer 1

Running gulp will run the default task which you haven't included in your gulpfile. You need to add this

gulp.task('default', ['sass','watch']);