1

I have a css folder with sub-folders populated with scss files. How can I watch the whole folder and automatically generate a separate style.css file on change for every folder.

`--css
    --content
      content.scss
    --home
      home.scss
    --about
      about.scss
    --main
      main.scss`

If I change, say, content.scss I want it to generate content.css, and idealy, content.min.css.

Well. I tried to use Dart-sass, but it generates *.css.map and I need *.min.css. Dart-sass doesn't reflect to changes made in imported files like @import '../file.scss'. I tried to use concurrently, but it takes a lot of space in package.json, looks dirty and it failed every time I ran it. I have no idea how to do it with node-sass. I looked at some solutions, but most of them seem to be really old and outdated , they are all about old technologies.

  • Nodemon is a perfect candidate for this scenario. Nodemon can watch a directory of files and execute any arbitrary command whenever any file changes. It might look something like `nodemon --exec "node-sass build && node-sass minify" ./css/**/*.scss`. Note: you will need to update the command to invoke node-sass with the correct arguments. – Ryan Wheale Feb 13 '23 at 17:39
  • @RyanWheale gonna give it a chance –  Feb 13 '23 at 17:44
  • Do I need NodeJS for this? –  Feb 13 '23 at 17:56
  • Yes you will need node. You are already using node by using node-sass, gulp, concurrently, and node package manager (npm). – Ryan Wheale Feb 13 '23 at 18:57

0 Answers0