Built-In preview only refreshes SCSS/CSS upon unfocusing of window

New user, so maybe I'm missing a setting or knowledge but:

When using the built-in live preview, I've noticed that it will only reflect changes in my SCSS/CSS file once I take focus off of the whole window (i.e. switching to Firefox/Spotify, then switching back into Webstorm). The HTML will refresh right away, no issues. I'm running an M1 Macbook Pro, and the native, latest version of Webstorm.

  • I change a property in my .scss file (like border color to red), no change is reflected in the preview unless Webstorm loses/regains focus.
  • I am compiling SCSS through the terminal, not a File Watcher.
  • I've tried both "On Save" and "On Changes", no issue persists.
  • Issue also exists when using Firefox, changes reflect at the same time upon focus toggling.

Let me know if any other info is needed to solve.


As your are transpiling your files externally, the IDE virtual file system is not synchronized once the file is created until you switch the focus. this is expected. Try using file watchers instead


That's what I was thinking, I'll have to try them again. They weren't working the way I needed them too.


The problem is the same, file watchers have been set up fine. I'm just using FF for the moment I suppose.


What do your file watchers look like? Please share screenshots of watchers settings


your file watcher is not set up properly: the settings in Output Path to Refresh: doesn't match your actual output path, that's why the IDE virtual file system is not synchronized once the file is created. Please see https://www.jetbrains.com/help/webstorm/2021.2/using-file-watchers.html#transpilerBehaviour for more information

Please try changing this field value to $ProjectFileDir$/styles/css/$FileNameWithoutExtension$.css


AH, that was it! Thank you, it was driving me crazy because I knew it was something small that I was missing like that. Now I can go a little deeper into the features without worrying about this anymore ha.


Please sign in to leave a comment.