Vue CLI - No PostCSS config found

Viewed 3538

i have a package.json as this:

{
  "name": "dashboard",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "apexcharts": "^3.8.4",
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "vue": "^2.6.10",
    "vue-apexcharts": "^1.5.1",
    "vue-numerals": "^3.0.5",
    "vue-router": "^3.1.3",
    "vue-virtual-scroll-list": "^1.4.4",
    "vuetify": "2.1.13",
    "vuex": "^3.1.2",
    "vuex-map-fields": "^1.3.6",
    "vuex-persist": "^2.2.0"
  },
  "devDependencies": {
    "@mdi/font": "^3.8.95",
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "typeface-roboto": "^0.0.75",
    "vue-cli-plugin-vuetify": "^2.0.5",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  }
}

As I did the setup for this project via Vue cli I selected that options as Eslint, Babel and so on are incapsulated in the package.json. I put them in several files now: .eslintrc.js, babel.config.js, and postcss.config.js. Can I do this just like that - creating these files and remove the contents from the package.json?

The contents of the postcss.config.js is this:

module.exports = {
    plugins: {
        autoprefixer: {},
    },
};

When I build this I always get this message:

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No PostCSS Config found in: /Users/dev/Sites/dev/src/node_modules/vuetify/src/directives/ripple
    at /Users/dev/Sites/dev/src/resources/views/dashboard/node_modules/postcss-load-config/src/index.js:91:15

 @ /Users/dev/Sites/dev/src/node_modules/vuetify/src/directives/ripple/VRipple.sass 4:14-329 14:3-18:5 15:22-337

Before that I see this message at top:

65% building 852/919 modules 67 active /Users/dev/Sites/dev/src/resources/views/dashboard/node_modules/axios/lib/core/transformData.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

Does this mean that I need to use the sass-loader which is specified in the package.json in the postcss.config.js as well? I am bit puzzled, because on another project I have the same configuration and no other content in the postcss.config.js and I do not get error messages about missing plugins. Thanks!

1 Answers

I advise you to try launching vue ui in the console. After that in the "dependencies" category, you have to try to uninstall packages for CSS-processors and then reinstall it.
Probably some of these packages are corrupted.

Related