WordPress项目中PhpStorm的SCSS File Watcher配置优化求助

Hey Diego, let's sort out this SCSS compilation setup for your WordPress project on PhpStorm 2019.3.4 (MacOS Catalina). I’ve worked through similar theme/plugin SCSS workflows before, so here’s a precise solution that fits your exact needs:

Core Goal Recap #

First, let’s lock down what we need to avoid compiling every random SCSS file:

• Child Theme: Only compile the root style.scss (which imports all _{file_name}.scss modules) into a single style.css in the theme root.
• Custom Plugin: Only compile {my_plugin_name}.scss (which imports /pages//parts subdir SCSS) into a matching .css file in the same directory.

Step 1: Configure config.rb #

Create (or update) your project’s root config.rb with this setup—it handles path logic and ensures clean output:

# Basic Compass/SCSS setup
require 'compass/import-once/activate'
Encoding.default_external = "utf-8"

# Set output style: use :compressed for production, :expanded for development
output_style = :expanded
# Enable sourcemaps for easy browser debugging
sourcemap = true

# Helper functions to identify our target entry files
def is_theme_entry(file_path)
  file_path.include?('/wp-content/themes/{my-child-theme}/') && File.basename(file_path) == 'style.scss'
end

def is_plugin_entry(file_path)
  plugin_css_dir = '/wp-content/plugins/{my_plugin_name}/Resources/assets/css/'
  file_path.include?(plugin_css_dir) && File.basename(file_path) == '{my_plugin_name}.scss'
end

# Ensure output files go to the correct locations
on_stylesheet_saved do |file|
  if is_theme_entry(file)
    theme_root = File.dirname(file)
    target_css = File.join(theme_root, 'style.css')
    target_map = File.join(theme_root, 'style.css.map')
    # Move compiled files to target if needed
    FileUtils.mv(file, target_css) unless File.identical?(file, target_css)
    FileUtils.mv("#{file}.map", target_map) if File.exist?("#{file}.map") && !File.identical?("#{file}.map", target_map)
  elsif is_plugin_entry(file)
    plugin_dir = File.dirname(file)
    target_css = File.join(plugin_dir, '{my_plugin_name}.css')
    target_map = File.join(plugin_dir, '{my_plugin_name}.css.map')
    FileUtils.mv(file, target_css) unless File.identical?(file, target_css)
    FileUtils.mv("#{file}.map", target_map) if File.exist?("#{file}.map") && !File.identical?("#{file}.map", target_map)
  end
end

Step 2: Set Up Two Separate File Watchers #

We’ll create two dedicated File Watchers—one for the theme, one for the plugin—to only trigger compilation on our entry SCSS files.

File Watcher 1: Child Theme SCSS #

1. Open PhpStorm’s Preferences > Tools > File Watchers
2. Click the + button and select SCSS (or Compass if you use Compass mixins)
3. Configure these fields:
   • Name: WordPress Theme SCSS Compiler
   • File type: SCSS
   • Scope: Click ... → Local → Add a path: file://$ProjectFileDir$/wp-content/themes/{my-child-theme}/style.scss (this restricts the watcher to only this entry file)
   • Program: Path to your Sass/Compass executable. On MacOS, use which sass or which compass in Terminal to get the absolute path (e.g., /usr/local/bin/sass or ~/.rbenv/shims/compass)
   • Arguments:
     • If using Sass: $FileName$:$ProjectFileDir$/wp-content/themes/{my-child-theme}/style.css --sourcemap=auto --style expanded
     • If using Compass: compile $FileDir$ --config $ProjectFileDir$/config.rb
   • Output paths to refresh: $ProjectFileDir$/wp-content/themes/{my-child-theme}/style.css:$ProjectFileDir$/wp-content/themes/{my-child-theme}/style.css.map
   • Working directory: $FileDir$
   • Check Auto-save edited files to trigger watcher and Trigger the watcher on external changes

File Watcher 2: Custom Plugin SCSS #

1. Repeat the process to create a second watcher:
   • Name: WordPress Plugin SCSS Compiler
   • File type: SCSS
   • Scope: Add path: file://$ProjectFileDir$/wp-content/plugins/{my_plugin_name}/Resources/assets/css/{my_plugin_name}.scss
   • Program: Same Sass/Compass path as above
   • Arguments:
     • If using Sass: $FileName$:$FileDir$/{my_plugin_name}.css --sourcemap=auto --style expanded
     • If using Compass: compile $FileDir$ --config $ProjectFileDir$/config.rb
   • Output paths to refresh: $FileDir$/{my_plugin_name}.css:$FileDir$/{my_plugin_name}.css.map
   • Working directory: $FileDir$
   • Enable the same auto-save/external change triggers

Key Notes to Avoid Issues #

• Your underscore-prefixed _{file_name}.scss modules are already set up correctly—SCSS treats these as "partial" files, so they won’t compile on their own even if the watcher accidentally picks them up.
• Test by editing a theme module SCSS file: it should trigger the theme watcher to recompile style.scss into style.css.
• If PhpStorm can’t find your Sass executable, double-check the absolute path (Terminal’s which sass will give you the correct one).

内容的提问来源于stack exchange，提问作者Diego