Using px2rem does not take effect

Rookie recently did a project , Just need to use px2rem, But all the online searches are problematic , Maybe the rookie is too delicious , Still looking at the wrong place , The boss can give advice ！！！

Every time a rookie wants readers to exchange ideas , But there is no one in the pinlun area every time ,(T~T)

webpack To configure

First, the first pit is vue.config.js, Many bloggers say that the configuration is like this ：

But the rookie actually said it would report an error , Report the wrong thing ：

ERROR Failed to compile with 1 error 17:18:34

error in ./src/views/HomeView.vue?vue&type=style&index=0&id=9ea40744&scoped=true&lang=css&

Syntax Error: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'plugins'. These properties are valid:
object { postcssOptions?, execute?, sourceMap?, implementation? }


ERROR in ./src/views/HomeView.vue?vue&type=style&index=0&id=9ea40744&scoped=true&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/views/HomeView.vue?vue&type=style&index=0&id=9ea40744&scoped=true

Anyway, I don't know how to solve it ！！！（ I hope readers can communicate more ）

Correct configuration , Compatible with current vuecli

（vue3 I don't know whether the branch supports it ）

module.exports = {
    
  chainWebpack: config => {
    
    config.module
      .rule("css")
      .test(/\.css$/)
      .oneOf("vue")
      .resourceQuery(/\?vue/)
      .use("px2rem-loader")
      .loader("px2rem-loader")
      .before('postcss-loader')
      .options({
    
        remUnit: 75
      });
  },
}

The created template contains defineConfig The same is true for copying the past , Compatible ！

Downloaded package

See other bloggers , Some installation packages don't say , What you said is incomplete , Here the rookie lists all the things he needs

• npm i px2rem-loader -D
• npm i postcss-loader -D
• npm i postcss-px2rem -D

Use of

This postcss-px2rem It's not compatible scss Of , Anyway, as long as the rookie is style Add up lang=‘scss’, This will directly fail ！！！

Online search methods are also more and more unreliable , It is recommended not to use scss 了 , Anyway, it doesn't really affect ！！！

Remember briefly , In the future, it's easy to use by yourself ！！！