How to enable hot module reloading when changing scoped CSS in Vue CLI project?

Question

I've created a basic Vue project (with Vue CLI 3) and when styling Vue components with scoped attribute the changes are not applied with hot reload module feature.

<style lang="scss" scoped>
.component-info {
  background: #ddd;
  padding: 1em;
  margin: 1em;
  color: blue;
}
</style>

If I remove scoped attribute from <style> element then styles are applied in browser the moment I save file but then styles are not local (scoped) to the component anymore.

Is there any way to enable HMR with Vue scoped styles?

Surbeck

I ran into the same problem some time ago. It was fixed by refreshing the page (just once, HMR started to work properly after that). I think that issue appears at the moment when you're switching between scoped/global styles and Vue can't re-initialize those on-the-fly. I guess. But anyway, I just started a new project with scss and it work fine.. – Gaynellegayner