angular2 angular2 - 1 month ago 18
Sass (Sass) Question

How to compile scss to css on npm start

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

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']);.