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 · Accepted Answer · 2017-06-29 00:17:29Z

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.

Code Guru · Accepted Answer · 2019-01-04 06:26:20Z

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 4, 2019 at 6:26

Code Guru

15.8k31 gold badges147 silver badges214 bronze badges

answered Nov 4, 2016 at 22:10

Khang Lu

1,00911 silver badges12 bronze badges

2 Comments

Vishal Over a year ago

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?

Khang Lu Over a year ago

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.

Mircea Stanciu · Accepted Answer · 2016-11-10 10:00:19Z

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, 2016 at 10:00

Mircea Stanciu

3,7633 gold badges37 silver badges39 bronze badges

1 Comment

Vishal Over a year ago

Thanks @Mircea - will surely try this out!!

Collectives™ on Stack Overflow

How to compile scss to css on npm start

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related