postcss-loader does not support hot module replacement
makkarpov opened this issue · 9 comments
This is a duplicate of nuxt/postcss8#18 because this bug is not a fault of Nuxt postcss module, but of postcss-loader itself.
- Operating System: N/A
- Node Version: 14.16.1
- NPM Version: 6.14.12
- webpack Version: 4.46.0
- postcss-loader Version: 4.3.0
Expected Behavior
Page does a hot reload when stylesheets are modified.
Actual Behavior
Page does a full reload instead of hot reload when stylesheets are modified. Relevant warnings are:
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
Code
N/A, see reproduction repository
How Do We Reproduce?
- Clone https://github.com/bradlc/nuxt-postcss8-bug
- Run
npm install
- Run
npm run dev
- Change the background color in
assets/css/main.css
- Notice that the web page does a full reload instead of a hot reload
postcss-loader never supports hot module replacement, here missed hot part of code and should be fixed in place there hot code was added, sorry impossible to fix here
Especial please read This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves.
, it means CSS code doesn't accept itself as module so page was reloaded
Do you mean css-loader
? Because CSS code cannot support or not support any kind of hot module replacement, they are just stylesheets.
Something wrong in nuxt, css-loader also doesn't has hot code, only style-loader
has it, but you don't have style-loader in your pipeline
I think this due because nuxt has own hot module replacement code for CSS
Well, Nuxt is definitely not to blame because it is just a 30 lines of code which adds postcss to build, and nothing more.
https://github.com/nuxt/postcss8/blob/main/src/index.ts - that is all, no logic there, just inclusion in build.
Actually there is no nuxt module in path - css-loader!postcss-loader!style.css
.
css-loader
and postcss-loader
are two remaining modules. Why don't they support hot reload?
Why don't they support hot reload?
Because they can be used for any env (even bundle CSS code for libraries for Node.js), only style-loader
should be used for browser, there hot is possible (in theory hot possible in Node.js too, but it is not trivial)
After examining actual webpack config I found that css-loader
is always chained after vue-style-loader
. So (a version of) style-loader
is present in the pipeline.
Sample of loader chain
"use": [
{
"loader": "/node_modules/vue-style-loader/index.js",
"options": {
"sourceMap": true
}
},
{
"loader": "/node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js",
"options": {
"esModule": false,
"modules": {
"localIdentName": "[local]_[hash:base64:5]"
},
"sourceMap": true,
"importLoaders": 2
}
},
{
"loader": "/node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js",
"options": {
"sourceMap": true,
"postcssOptions": {
"plugins": [
{
"postcssPlugin": "postcss-import"
},
{
"postcssPlugin": "postcss-url"
},
null,
null,
{
"postcssPlugin": "postcss-mixins"
},
{
"postcssPlugin": "tailwindcss/nesting"
},
{
"postcssPlugin": "tailwindcss",
"plugins": [
null
]
},
{
"postcssPlugin": "autoprefixer",
"options": {}
}
]
}
}
}
]
Please open an issue in vue-style-loader
, no style-loader
here https://github.com/vuejs/vue-style-loader/blob/master/package.json#L15