HMR not working for scss files

help
1

I don’t know if it should work to be perfectly honest but it would be amazing if it did. I am on Meteor 2.10, with the hot-module-replacement package, react for the frontend.

  • When updating a react component, HMR works as expected.
  • When updating a scss file imported by a react component, the HMR update triggers (I see a console log message) but right after a full page reload is done, I am guessing by fourserven:scss?

Code looks something like this:

...
import './date-navigation.scss';

export default function DateNavigation(props) {
    return (...)
}

It’s the same on a brand new app created with the react flag. Is there anything that can be done to have HMR also work with scss files?

2

I use the same ecosystem and I have the same behavior.
I think unlike JS files which in development are consumed as they are (not minified, not bundle-compiled), SCSS is consumed as CSS so need re-compilation after every update.

I had this same question in the past and accepted the behavior but now … I keep an eye on your post…

3

Meteor has 3 ways of applying changes:

  1. The first is hot module replacement, which just works for js files
  2. The second is hot code push for css, which updates the stylesheets without reloading the page
  3. The third is to reload the page with hot code push, for the changes the first two can’t apply

It should be possible to update the scss changes without reloading the page, even if HMR can’t be used. If you create a reproduction and an issue on GitHub, I can look into to it when I get some time. There are some situations where stylesheets become js files. If that is happening here, we need to add some code so those can be updated with HMR.

4

Thanks for the replies. I’m working on a reproduction following your suggestion @zodern . I actually can’t reproduce it on a fresh meteor-generated react app. HMR behave as expected in all the situations I’ve tested.

I tested also on a recent app I had, which was showing the problem. But after updating to the latest version of Meteor it started behaving as expected as well.

Now I’m trying to isolate the behaviour on my main app, a very old mess of files.

5

So after much trial and error, I think I narrowed it down to the standard-minifier-css package missing from my package list. Adding it to that old project somewhat fixed HMR for scss. It is now correctly updating the css without page reload.

Still investigating a problem where I can add css rules and they are showing on the page instantly, but if I remove rules, the HMR triggers but the css doesn’t get applied and the previous css is still showing. A full refresh clears it.