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

anycoloryoulike84 · Answer 1 · 2017-06-29T00:17:29.100

The solution to this issue has been explained in other threads, see: How to compile scss to css with node-sass

However, here's my solution using the run-watch program, nodemon:

npm install node-sass nodemon --save-dev

In package.json, add these to your "scripts":

 "build-css": "node-sass --include-path scss src/input.scss src/styles.css",
 "watch-css": "nodemon -e scss -x \"npm run build-css\" "

Then, in your "start" script, use this:

 "start": "concurrently \"node app.js\" \"npm run watch-css\" "

Next, we need to install the concurrently package:

npm install concurrently --save

To compile and serve your files,

npm start

Therefore, the "npm start" command triggers a build that starts the app and concurrently calls the "run watch-css" command which in turn calls "build-css" to compile scss to css in real-time through nodemon. It compiles and refreshes live when you edit any scss in your text editor.

score 1 · Accepted Answer · edited Jan 04 '19 at 06:26

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

edited Jan 04 '19 at 06:26

Sunil Garg

14,608
25
132
189

answered Nov 04 '16 at 22:10

Khang Lu

959
9
12

ok will try it. but i have gulp watch in gulpfile.js as well as in package.json start script. It should have run, isnt it? – Peter Nov 05 '16 at 09:25
if you run `gulp watch` by it self, it would only run the watch task without compiling. Therefore you need to add both into a default task. – Khang Lu Nov 05 '16 at 17:24

score 0 · Answer 3 · answered Nov 10 '16 at 10:00

0

Without gulp

  "start": "tsc && concurrently \"tsc -w\" \"lite-server\"  \"npm run build-css\"",
  "build-css": "node-sass resources/css/sass/style.scss resources/css/style.css",

answered Nov 10 '16 at 10:00

Mircea Stanciu

3,675
3
34
37

Thanks @Mircea - will surely try this out!! – Peter Nov 10 '16 at 10:01

How to compile scss to css on npm start

3 Answers3