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 with global style does not work

See original GitHub issue

Bug report

HMR with global style does not work.

https://nextjs.org/learn/basics/styling-components/global-styles-work

Describe the bug

When we apply global keyword in <style jsx global>{…css…}</style> and then remove, we must have to reload the browser. It does not automatically change the CSS styles in browser. HMR is not working in this case.

Also sometimes we even need to restart dev server by npm run dev

If we remove keyword global the style should be removed by HMR If we add keyword global the style should be added by HMR

To Reproduce

Steps to reproduce the behavior

as described here https://nextjs.org/learn/basics/styling-components/setup

Expected behavior

it should automatically change styles

System information

OS: Ubuntu 18.04
Browser Chrome 79.0.3945.130
Version of Next.js: 9.2.1

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:7 (6 by maintainers)

Top GitHub Comments

1reaction

timneutkenscommented, Mar 16, 2020

@aralroca try using the built-in sass support: https://nextjs.org/blog/next-9-3.

0reactions

balazsorban44commented, Jan 30, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.