Search code examples
wordpresssassphpstormcompassfile-watcher

Wordpress SCSS file watcher - PhpStorm

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:

  1. /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:

enter image description here

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

  1. 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:

enter image description here

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

Solution

  • 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