Wordpress SCSS file watcher - PhpStorm

Question

I tried to look around here and over the internet, searching for a solution but i can't find anything that works with my current env. Let me explain how it is, i have a standard Wordpress project and i'm writing SCSS in [n] different places:

/wp-content/themes/{my-child-theme}/scss which contains all of my _{file_name}.scss divided into [n] directories and a style.scss file inside the root of the theme that loads them all, so:

which should generate only one .css file: style.css. This is the first working dir.

All the others are custom plugins which i develop, so all the scss would be (i use the same folder struct for all my plugins) /wp-content/plugins/{my_plugin_name}/Resources/assets/css which contains a {my_plugin_name}.scss file that loads all the other scss part which are divided like in the screenshot above, so /pages and /parts + something else if that happens. I want for this .css to be generated in the same place as the {my_plugin_name}.scss is.

I was used to go with this config.rb file:

    http_path = "/"
    css_dir = "/"
    sass_dir = "/"
    images_dir = "/"
    javascripts_dir = "/"

    output_style = :compressed

And this file watcher conf:

If i keep it all that way, all of my .scss gets compiled, everywhere. That's obviously something i don't want. How should i configure this env (config.rb + file watcher) to make it work as i want?

I use PhpStorm 2019.3.4 on MacOs Catalina if that matters. Any help/suggestion would be appreciated. Thank you

does your `config.rb` work in desired way when you run compass in terminal (i.e. when not using the IDE/file watcher)? as for file watchers, you can have multiple watchers configured for different scopes, with different arguments, etc. — lena, Apr 09 '20 at 18:19
@lena i tried setting sass_dir exclusivesly to one of those folder (Ex. /wp-content/themes/{my-child-theme}/ and it indeed works. Or to say it better, it searches all of the .scss inside the child theme folder, no matter how deep the .scss file is. Actually this is not a solution for me either because sometimes i may have node_modules inside the child theme folder and if i leave it like that it recompiles everything inside that too, which i don't actually want — Diego, Apr 10 '20 at 08:39

score 0 · Accepted Answer · answered Sep 02 '20 at 15:21

Navigator of the future, this is what i came out with since no solution were given to me. Create a file watcher and user and use this lines as "arguments" parameter of the watcher config. Use scope "Project Files" and working dir "$ProjectFileDir$"

compile -c config_plugin.rb --debug-info --time --trace --force
compile -c config_theme.rb --debug-info --time --trace --force

where config_[what] is a separated file made like this:

http_path = "wp-content/plugins/plugin_name/"
css_dir = "wp-content/plugins/plugin_name/"
sass_dir = "wp-content/plugins/plugin_name/"
sass_dir = "wp-content/plugins/plugin_name/"
images_dir = "wp-content/plugins/plugin_name/"
javascripts_dir = "wp-content/plugins/plugin_name/"

output_style = :compressed

Wordpress SCSS file watcher - PhpStorm

1 Answers1