question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

HMR not working when changing style

See original GitHub issue

I have the plugin set up with vite-plugin-pages. Changing the template will trigger auto reload, but changing the style will not - in fact I must restart the server to see the css changes.

<template>
  <div class="wrapper">
    <h1>Change me</h1>
    <RouterView />
  </div>
</template>

<style scoped>
.wrapper {
  color: green; 
}
</style>

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:5
  • Comments:5

github_iconTop GitHub Comments

2reactions
phamhongphuccommented, Nov 16, 2022

temporary workaround: save vite.config.ts to restart the whole server

2reactions
hooraycommented, Aug 19, 2022

same problem. In 0.6.0, either a template change or a style change will trigger vite hmr. But in 0.7.0, a template or style change will only reload the page, and the style change will not take effect yet.

Read more comments on GitHub >

github_iconTop Results From Across the Web

webpack 5 does not HMR (hot reload) on style changes
I run into that problem when I started a new project. Similar configuration from previous ones worked as intended. here is my webpack.config...
Read more >
HMR not working on style changes (Styles expected to be ...
Styles are meant to be inline when running in HMR so that style changes are reflected without browser refresh. However the configuration in ......
Read more >
Hot Module Replacement - SurviveJS
Hot Module Replacement (HMR) builds on top of the WDS. It enables an interface that makes it possible to swap modules live. For...
Read more >
Webpack's Hot Module Replacement Feature Explained
If you have CSS changes, then the CSS loader or Style loader will be ... When you save code changes while running an...
Read more >
MiniCssExtractPlugin - webpack
It supports On-Demand-Loading of CSS and SourceMaps. ... Do not use style-loader and mini-css-extract-plugin together. webpack.config.js
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found