Error: EACCES: permission denied, open '/Users/user-name/.config/postcssrc'

Question

I'm trying to run a project locally using npm run serve but I keep getting an error regarding postcss which I can't find any solution for.

I'm simply copying the project files from another project and pasting them into this one. The original project doesn't give me any of these issues.

The error is described as follows:

ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss)
    Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
    Error: EACCES: permission denied, open '/Users/user-name/.config/postcssrc'
     @ ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss 4:14-389 15:3-20:5 16:22-397
     @ ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss 1:0-447 1:0-447
     @ ./src/App.vue 5:0-63
     @ ./src/main.js 7:0-28 18:20-23

I'm currently using vue 3 and node -v 14.

Answer 1

I had the similar error in a project and could fix either by disable the automatic configuration of the postcss loader in the webpack config file (in my case the vue.config.js):

module.exports = {
...
   css: {
...
      loaderOptions: { postcss: { postcssOptions: { config: false } } }
   }

or by creating a simple postcss configuraton file in the project root directory postcss.config.js :

module.exports = {};