CSS updates cause full page reload

[bradlc]

Normally when saving a global CSS file in Nuxt the styles are updated via a "hot reload." However, when using the @nuxt/postcss8 module this does not happen and the web page is fully reloaded instead.

Reproduction

1. Clone https://github.com/bradlc/nuxt-postcss8-bug
2. Run npm install
3. Run npm run dev
4. Change the background color in assets/css/main.css
5. Notice that the web page does a full reload instead of a hot reload

Warnings logged in the browser when updating the CSS file

Ignored an update to unaccepted module ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js?!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js?!./assets/css/main.css -> ./assets/css/main.css -> ./.nuxt/App.js -> ./.nuxt/index.js -> ./.nuxt/client.js -> 0

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.

[HMR]  - ./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./assets/css/main.css

[HMR] Reloading page

[fabis94]

Any updates about this bug? AFAIK there are workarounds like migrating back to the PostCSS7 compatibility build, but it would be great to hear when a real fix will arrive