0.6.0 reloading stylesheets is not working anymore

Hey, took me a while to figure out what was causing this.

I have the following stack

• next@8.0.3
• @zeit/next-sass@1.0.1

The following config:

const sass = require('@zeit/next-sass');

[sass, {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]',
  },
}]

The Problem The project is reporting in the chrome console (and this is normal and hasn’t caused any issues before)

Conflicting order between:

• css ./node_modules/css-loader??ref–10-3!./node_modules/postcss-loader/src??ref–10-4!./node_modules/sass-loader/lib/loader.js??ref–10-5!./src/components/container/Container.scss
• css ./node_modules/css-loader??ref–10-3!./node_modules/postcss-loader/src??ref–10-4!./node_modules/sass-loader/lib/loader.js??ref–10-5!./src/components/card/Card.scss

BUT

1. When changing route
2. Most of the components on the new page will be unstyled unless I hard-reload the page.

Looks like the styles are not injected into the head

Solution

When I downgraded to 0.5.0 I get the same flash of some unstyled components on route change and the following message from webpack:

[HMR] Reloading stylesheets…

Following by a correct CSS render.

---

I will attempt to make a repro with vanilla webpack setup, but until then, this issue can serve as a placeholder.

[ScriptedAlchemy]

Awesome, I’ve got an event this evening but will dig into the problem this weekend

[ScriptedAlchemy]

Thanks, For the ping! Will set a reminder to check this