Pages render without styles for a brief second

Bug report

Describe the bug

Pages render without any styles for a brief second before the CSS is loaded:

This only happens in production. In development everything is fine and pages render perfectly styled immediately.

To Reproduce

I try to load some global styles in _app.tsx like:

// _app.tsx
import '../assets/styles/global.scss';

const MyApp = () => { ... }

export default MyApp;

// global.scss
@mixin system-font() {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  @include system-font();
  background: white;
  color: $text-color;
  line-height:1.5;
}

Then all my pages and components follow this pattern:

// my-page.tsx
import './my-page.scss'

const MyPage = () => { ... }

export default MyPage;

// my-component.tsx
import './my-component.scss'

const MyComponent = () => { ... }

export default MyComponent;

Expected behavior

I expect pages to render with styles without such flickering.

System information

• OS: macOS Catalina 10.15.5
• Browser: Firefox 78.0.2
• Version of Next.js: 9.4.4
• Version of Node.js: 12.18.1

[Timer]

Closing as there was no full reproduction provided.

[muntasirsyed]

Agree somewhat with @osequi 's sentiment.

This issue has been reported multiple times by multiple different people. Every time the issue is closed with a version release referenced, yet the issue remains for all of those who originally reported the issue.

It would be better to, upon releasing any potential fix, checking with the original bug reporter to see if their issue has actually fixed or not before closing these issues down prematurely.