Giters

webpack-contrib / postcss-loader

PostCSS loader for webpack

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

postcss-loader does not support hot module replacement

makkarpov opened this issue · comments

commented

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?

commented

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

commented

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

commented

Do you mean css-loader? Because CSS code cannot support or not support any kind of hot module replacement, they are just stylesheets.

commented

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

commented

I think this due because nuxt has own hot module replacement code for CSS

commented

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?

commented

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)

commented

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": {}
                  }
              ]
          }
      }
  }
]
commented

Please open an issue in vue-style-loader, no style-loader here https://github.com/vuejs/vue-style-loader/blob/master/package.json#L15