My PostCSS plugin does not work in a Vue-cli 3 project

user_16627614 0
Viewed 620

so I wrote this postcss plugin that I'm trying to make use of. I tested it according to the postcss guidelines, and it worked as expected until I attempted to use it in an actual project.

Here's the plugin on GitHub

I'm trying to use it in a Vue-cli app (Webpack).

I installed the plugin with npm install. I have postcss & postcss-loader installed too (Ive tried different versions, reinstalling, but no luck)

Here's my postcss.config.js

module.exports = {
  plugins: [
    require("postcss-vwh"),
    //...
  ],
};

Update

Ok, so I created a new minimal application (without vue, only Webpack 5, css-loaders including latest version of postcss and the plugin) and it worked as expected!

So apparently the problem is not with my plugin after all, but with vue-cli. After hours of trying to make it work, I'm left with this error message:

Syntax Error: Error: PostCSS plugin postcss-vwh requires PostCSS 8.

Research shows that this error can be fixed by upgrading postcss-loader, but I'm forced by vue-cli to use version 4, which is the last version compatible with Webpack 4, on which my vue-cli app runs.

So, is there any way to make my plugin not as demanding maybe make it require lower version of postcss, so it can be used with Webpack 4?

postcss vue.js javascript
1 Answers

So I got an answer from creator of PostCSS here, which basically said, it's not recommended to try and support older postcss versions. Best approach is to update postcss.

So what I did was say bye-bye to vue-cli, manually created a new Webpack 5 / vue app from scratch, copied all my stuff there, installed postcss 8 and now it's working.

user_166276140
Related