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.

7 comments
Comment actions Permalink

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.

1
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0

Please sign in to leave a comment.