PostCSS plugin postcss-url requires PostCSS 8. Migration guide for end-users

[hsbtr]

Postcss8.0 has been installed but it still gives an error. Check that other dependencies are up to date. Is it because the version is too high?

`

explore@0.1.0 serve E:\workSpaces\explore
vue-cli-service serve

INFO Starting development server...
40% building 148/153 modules 5 active E:\workSpaces\explore\node_modules\core-js\internals\to-absolute-index.jspostcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
98% after emitting CopyPlugin

ERROR Failed to compile with 4 errors 11:18:11

error in ./src/App.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-url requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss\lib\processor.js:153:15)
at new Processor (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss\lib\processor.js:56:25)
at postcss (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss\lib\postcss.js:55:10)
at Promise.resolve.then.then (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss-loader\src\index.js:140:12)

@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/src??ref-
-8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss& 4:14-446 14:3-18:
5 15:22-454
@ ./src/App.vue?vue&type=style&index=0&lang=scss&
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

error in ./src/components/Base/TabBar.vue?vue&type=style&index=0&id=4a7f0d48&scoped=true&lang=scss&

Module build failed (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-url requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss\lib\processor.js:153:15)
at new Processor (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss\lib\processor.js:56:25)
at postcss (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss\lib\postcss.js:55:10)
at Promise.resolve.then.then (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss-loader\src\index.js:140:12)

@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/src??ref-
-8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Base/TabBar.vue?vue&type=style&index=0&id=4a7f0d
48&scoped=true&lang=scss& 4:14-509 14:3-18:5 15:22-517
@ ./src/components/Base/TabBar.vue?vue&type=style&index=0&id=4a7f0d48&scoped=true&lang=scss&
@ ./src/components/Base/TabBar.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
@ ./src/App.vue?vue&type=script&lang=js&
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

error in ./src/views/Home.vue?vue&type=style&index=0&id=fae5bece&scoped=true&lang=scss&

Module build failed (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-url requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss\lib\processor.js:153:15)
at new Processor (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss\lib\processor.js:56:25)
at postcss (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss\lib\postcss.js:55:10)
at Promise.resolve.then.then (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss-loader\src\index.js:140:12)

@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/src??ref-
-8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=style&index=0&id=fae5bece&scoped=tr
ue&lang=scss& 4:14-489 14:3-18:5 15:22-497
@ ./src/views/Home.vue?vue&type=style&index=0&id=fae5bece&scoped=true&lang=scss&
@ ./src/views/Home.vue
@ ./src/router/routes.js
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

error in ./src/views/Error.vue?vue&type=style&index=0&id=671a543e&scoped=true&lang=scss&

Module build failed (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-url requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
at Processor.normalize (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss\lib\processor.js:153:15)
at new Processor (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss\lib\processor.js:56:25)
at postcss (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss\lib\postcss.js:55:10)
at Promise.resolve.then.then (E:\workSpaces\explore\node_modules@vue\cli-service\node_modules\postcss-loader\src\index.js:140:12)

@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/src??ref-
-8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Error.vue?vue&type=style&index=0&id=671a543e&scoped=t
rue&lang=scss& 4:14-490 14:3-18:5 15:22-498
@ ./src/views/Error.vue?vue&type=style&index=0&id=671a543e&scoped=true&lang=scss&
@ ./src/views/Error.vue
@ ./src/router/routes.js
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
`

[vaseala]

install the postcss@8 at the root of your project:

npm i  -D postcss@8

[glebcha]

install the postcss@8 at the root of your project:

npm i  -D postcss@8

It won't help much. The problem stays still.

[lpreterite]

Refer to issues#435 of postcss-import, which can be resolved by downgrading. Other similar plugins are also supported by downgrading to postcss v7.x.

"postcss-import": "^14.0.0",
"postcss": "^8.2.4"

[peterlawless]

I wish the resolution was found in something other than downgrading, since I've followed the migration guide to use PostCSS8 to the letter.

[hellosanbao]

npm i -D postcss-url@9.0.0