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 causes component styles to disappear

See original GitHub issue

🐛 Bug Report

HMR works but loses inline styles until you refresh the whole page.

🎛 Configuration


💻 Code Sample


If you npm i then npm run dev you will see the time, in green, in realtime.

If you then change the component’s CSS to ‘red’ rather than ‘green’, you will actually lose all component defined styles until you refresh the page (font will become normal instead of bold, and black).

Upon refresh your style will have updated and you will see the time in red.

Worth noting - this might be caused by the fix for the other issue #15 whereby multiple css files added to parcel’s tree were causing styles to be overwritten.

🌍 Your Environment

See package.json for versions Ubuntu 18.10 Chrome Version 68.0.3440.106 (Official Build) (64-bit)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

adamheptoncommented, Nov 8, 2018

If you are using inline styles, it is preferable to have a compilerOptions config specified for css: true in order for HMR to work with CSS changes, e.g. (in a svelte.config.js file at the root of your project):

module.exports = {
  compilerOptions: {
    css: true
antonycommented, Nov 16, 2018

@adamhepton This fixes it! Wow! I can’t thank you enough!

This needs to be in the docs. I’ll open a PR.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Styled-Components loses styles after reload - Stack Overflow
However on development, once I change the styles of a styled component and reload, the component loses all of its styles.
Read more >
style-loader - webpack
Automatically injects styles into the DOM using multiple <style></style> . It is default behaviour. component.js import "./styles.css";. Example ...
Read more >
Animations | Quasar Framework
The transitions are used for entering (appearing) or leaving (disappearing) animations. However, Quasar can supply a big list of ready to use CSS...
Read more >
A short video showing a loose magazine causing feed problems in a Savage 93R17. 17 HMR 10 Rounds Steel Blued 90010.
Read more >
Basic Features: Fast Refresh - Next.js
The error will disappear automatically, so you won't need to reload the app. ... If you make a mistake that leads to a...
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 Post

No results found

github_iconTop Related Hashnode Post

No results found