使用px2rem不生效

菜鸟最近做项目，正好需要使用到px2rem，但是网上搜的都是有问题的，可能是菜鸟太菜了，还望错的地方，大佬可以指点！！！

每次菜鸟都希望读者交流指点，但是都是每次品论区都没人，(T~T)

webpack配置

首先第一个坑就是vue.config.js，很多博主都说配置是这样的：

但是菜鸟实测表示会报错，报错这个东西：

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

反正也不知道怎么解决！！！（希望读者多多交流）

正确的配置，兼容现在的vuecli

（vue3就不知道支不支持了）

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
      });
  },
}

创建的模板里面有 defineConfig 也是一样的复制过去用，可以兼容！

下载的包

看别的博主，有的安装包都不说，说的有的不全，这里菜鸟就把需要用到的都列出来了

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

使用问题

这个postcss-px2rem是不兼容scss的，反正菜鸟只要在style上加上lang=‘scss’，这个就直接失效了！！！

网上搜的办法也是一个比一个不靠谱，建议就不要使用scss了，反正其实也不是很影响！！！

浅浅记一下，今后自己好用！！！