CSS file not updating on external changes (SASS)

I have my CSS file open on one panel, SASS file open on the other panel. I update my SASS file, the file watcher kicks in, and when I hit refresh on my browser, the page is updated. But for some reason, my CSS file doesn't update the change, unless I close it and reopen it. Is there any way to get the open file to update the changes made externally, without having to close/reopen?

 

Using Windows 10. WebStorm 2021.1

8 comments
Comment actions Permalink

Do you have the CSS mapped to the SASS file? That's how it gets automatically updated on any change in the SASS file.

0
Comment actions Permalink

Yes I do - the issue is that the CSS file doesn't update visually unless I close and reopen it. Once it's reopened, it shows the changes. But the file itself updates (I know this because when I change the SASS file, and then refresh the browser, the page changes). But the open CSS file does not update to show the changes, unless I close and reopen it.

0
Comment actions Permalink

You need to have File Watchers turned on for the SASS files so they get compiled to CSS directly. Go to File->Settings->Tools->File Watchers and add the SASS and SCSS at project level.Hit Apply and after this the CSS should update on the fly .

0
Comment actions Permalink

I've already done this. Okay I guess I'm not being clear about the problem. I'll try again!

I have a file watcher for my SASS file. When I modify the SASS file, the CSS DOES update. I can check this by refreshing my browser, and the page I'm coding has changed. My issue is that the CSS file that is OPEN currently in the IDE does not update itself to show these changes immediately. I have to close the CSS file and reopen it. When I do that, I can see the updated CSS. That is my issue. I have the "Synchronize on external changes" setting checked, I have the File Watcher running on my SASS file.

0
Comment actions Permalink

This is how my File Watcher SASS setup looks like and it updates on the fly any change from the SASS file to the opened CSS file.Maybe it helps:

0
Comment actions Permalink

Your watcher settings look OK, everything works fine for me when using similar setup: .css files opened in the editor is updated instantly as soon as I change the .scss

Could you record a screencast that shows your steps?

0
Comment actions Permalink

@Elena Pogorelova

That's another person :)

0
Comment actions Permalink

@Andriy Bazanov  Thanks, I should have been more attentive:)

0

Please sign in to leave a comment.