External imports don't hot reload

[kristerkari]

Files that are imported using @import do not get live reloaded.

React Native's packager does not know that the file that has changed is imported in another file, so it does not know how to reload it.

One possible fix would be to add some kind of logic that keeps track of which files are imported using @import and tell the transformer to reload the correct file.

The same issue in the Stylus transformer:
kristerkari/react-native-stylus-transformer#3

[jinookoo]

Is anything updated?
I have to restart react-native-cli
How can I solved this issues.

[kristerkari]

@eyu0415 Unfortunately not. The problem is that React Native's Metro packger does not know about the files that are imported with @import, so it does not watch them for changes.

[keung7251]

@kristerkari will they fix it?

[kristerkari]

hello @keung7251, I'm not sure if this is something than can be fixed easily, so don't expect a quick fix.

[cristianmiranda]

It'd be nice to get this fixed. Is there any way of letting Metro know about these imported SCSS files? I understand it only looks for changes in JS files, but there should be a generated JS file that corresponds to the SCSS one, right?

[kristerkari]

Is there any way of letting Metro know about these imported SCSS files?

Not that I know of. Of course it might be possible that there is something in Metro, but the documentation for Metro is not that great.

I understand it only looks for changes in JS files, but there should be a generated JS file that corresponds to the SCSS one, right?

The @ımports are compiled on the fly using Sass, so what Metro sees is just one .scss file since Metro has no knowledge of Sass.