CODEWITHSUNDEEP
sasswebstorm
TKoL
TKoL

Reputation: 13892

Make WebStorm recompile single SCSS file when any SCSS file in folder changes

I'm working on a project that my colleagues are also working on, they're working on it in Atom and they have Atom set up so that it works like this:

There's a folder, css, and in that folder is the main file, custom.scss, which imports all other scss files and is compiled in custom.min.css and custom.min.css.map. There are also subfolders with more scss files. Any time any scss file changes in css or any of its subfolders, custom.scss recompiles, but no other scss file recompiles.

Using WebStorm's SCSS File Watcher, can I do this?

My first attempt was to change the scope in the watcher settings, to just watching custom.scss, and that kinda works, but I have to change custom.scss every time I want it recompiled, instead of it recompiling when I change any of the other scss files as well.

My intuition is that I should have the scope set to watching all scss files in the css directory, recursively, and that I should change the Arguments setting in the file watcher to explicitly say compile custom.scss into custom.min.css but I'm not quite sure how to do that

Upvotes: 0

Views: 371

Answers (1)

TKoL
TKoL

Reputation: 13892

The key setting here is 'Track only root files' -- when that's not set, it tries to compile all watched scss files as they are saved individually, but when it is set, it only compiles a file if it is NOT marked as an include in another file.

Set the scope to watch changes on all scss files: file:assets/css/*.scss

Click 'Track only root files'

Change the arguments to $FileName$:$FileNameWithoutExtension$.min.css --style compressed so that it minifies

Now, when you save a file included in custom.scss, it recompiles only custom.scss (and other root files) into custom.min.css and custom.min.css.map

Upvotes: 1

Related Questions