Loading PostCSS "postcss-import" plugin failed: Cannot find module 'postcss-import'

Question

I am installing vue2 without installing any external packages. I get this error after saying npm run serve.

It gives the following error. I couldn't come to a conclusion from my research. It didn't give an error when I downloaded it the same way on a different computer.

 INFO  Starting development server... 
 ERROR  Failed to compile with 2 errors                                                                                                                      09:44:17

 error  in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css&

Module Error (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-import" plugin failed: Cannot find module 'postcss-import'
Require stack:
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/node_modules/postcss-loader/dist/utils.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/node_modules/postcss-loader/dist/index.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/webpack/lib/ProgressPlugin.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/progress-webpack-plugin/index.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/lib/commands/serve.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/lib/Service.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/bin/vue-cli-service.js

(@/Users/ramazanozdemir/Documents/GitHub/client-side/src/App.vue)

 error  in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&lang=css&

Module Error (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-import" plugin failed: Cannot find module 'postcss-import'
Require stack:
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/node_modules/postcss-loader/dist/utils.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/node_modules/postcss-loader/dist/index.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/webpack/lib/ProgressPlugin.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/progress-webpack-plugin/index.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/lib/commands/serve.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/lib/Service.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/bin/vue-cli-service.js

(@/Users/ramazanozdemir/Documents/GitHub/client-side/src/components/HelloWorld.vue)

ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css& (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css&)
Module Error (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-import" plugin failed: Cannot find module 'postcss-import'
Require stack:
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/node_modules/postcss-loader/dist/utils.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/node_modules/postcss-loader/dist/index.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/webpack/lib/ProgressPlugin.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/progress-webpack-plugin/index.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/lib/commands/serve.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/lib/Service.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/bin/vue-cli-service.js

(@/Users/ramazanozdemir/Documents/GitHub/client-side/src/App.vue)
 @ ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css& 4:14-379 15:3-20:5 16:22-387
 @ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css& 1:0-437 1:0-437
 @ ./src/App.vue 4:0-75
 @ ./src/main.js 2:0-28 5:17-20

ERROR in ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&lang=css& (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&lang=css&)
Module Error (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-import" plugin failed: Cannot find module 'postcss-import'
Require stack:
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/node_modules/postcss-loader/dist/utils.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/node_modules/postcss-loader/dist/index.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/webpack/lib/ProgressPlugin.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/progress-webpack-plugin/index.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/lib/commands/serve.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/lib/Service.js
- /Users/ramazanozdemir/Documents/GitHub/client-side/node_modules/@vue/cli-service/bin/vue-cli-service.js

(@/Users/ramazanozdemir/Documents/GitHub/client-side/src/components/HelloWorld.vue)
 @ ./node_modules/vue-style-loader/index.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&lang=css& 4:14-398 15:3-20:5 16:22-406
 @ ./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&lang=css& 1:0-459 1:0-459
 @ ./src/components/HelloWorld.vue 4:0-82
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js& 1:0-53 5:4-14
 @ ./src/App.vue?vue&type=script&lang=js& 1:0-191 1:207-210 1:212-400 1:212-400
 @ ./src/App.vue 2:0-55 3:0-50 3:0-50 10:2-8
 @ ./src/main.js 2:0-28 5:17-20

webpack compiled with 2 errors

Package.json

 {
      "name": "deneme",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "core-js": "^3.8.3",
        "vue": "^2.6.14"
      },
      "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3",
        "vue-template-compiler": "^2.6.14"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "parserOptions": {
          "parser": "@babel/eslint-parser"
        },
        "rules": {}
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    }

I found workaround to get it working. It works when I delete the css lines in the App.vue and HelloWorld.vue files.

Example HelloWorld.vue style

<style>
/* h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
} */
</style>