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