Home

Is there any way to watch nestedly imported files ?

For example,
I have styles/ for custom global mixin and css.

1. common-mixin.css

@import 'styles/mixin/color';
@import 'styles/mixin/media';
..
..

2. global-class.css (this css is injected to css in nuxt.config.js )

@import 'styles/global/container';
@import 'styles/global/button';
..
..

If I change a imported file in common-mixin.css or global-class.css (e.g. styles/global/button.css or styles/mixin/color.css), HMR do not work even I refresh the page!
It finally works when I restart the server.

How can I apply it without restarting server or refreshing the page ?
Should I change the way to import stylesheet ? (flatten import style…)

For reference, I use postcss, postcss-import (which has path options), postcss-cssnext.