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.
Please sign in to leave a comment.
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$.cssAH, 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.