Search code examples
csssassnode-sass

Node-Sass compile multiple files in a single directory to one file

I need to compile multiple scss files into a single css file using node-sass.

My structure looks like this:

/
  /scss
    app.scss
    /components
      header.scss
  /css
    app.css

In my app.scss file I import all my other files. So watching just that file doesn't work like this example I tried:

"watch": "node-sass -w scss/app.scss css/app.css"

It did work as long as I put all the code in that file and didn't import anything else or manually compiled that each time, but the watching didn't work.

So I tried this as well to no avail:

"watch": "node-sass -wr scss/* app.css"
Solution

  • You could use the onchange npm package. You can watch globs and run scripts when any of them change.

    "watch": "onchange 'scss/**/*.scss' -- npm run compile",
"compile": "node-sass scss/app.scss css/app.css"