When running my application with npm start, I'm unable to compile scss files to css live. Is there a way to achieve live reload for sass to css similar to how ts are compiled to js by the tsc:w utility? Currently, I have to stop the build, then run gulp watch or node-sass command to compile scss to css, and finally restart the solution using npm start. I've tried different approaches but none seem to work. Below is the code snippet from 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\" ",
Gulpfile.js in the root directory looks like this:
'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/",
If anyone could shed some light on what I might be missing or provide guidance on the correct approach, it would be greatly appreciated. Thanks in advance!