postcss-pxtorem插件使用过程中的问题

webpack会读取 .postcssrc.js 对css、less、sass进行处理

module.exports = {
  "plugins": {
    "postcss-import": {}, // 通过postcss-import引入css文件
    "postcss-url": {}, // 通过postcss-url 处理css文件url
    "autoprefixer": {}, // 自动添加浏览器前缀
    "postcss-pxtorem": {
      "rootValue": 52, // 根元素字体大小
      "propList": ['*'], // 对哪些属性进行px-to-rem，*代表全部
    }
  }
}

安装对应的插件包

• npm install --save-dev postcss postcss-loader
• npm install --save-dev autoprefixer postcss-import postcss-url postcss-pxtorem

期间遇到的错误

 ERROR  Failed to compile with 3 errors                                                                                                                                                                        10:32:54 ├F10: AM┤
 error  in ./src/assets/css/style.less

Module build failed: Error: Invaild PostCSS Plugin module[3]
Require stack:
- E:\project\ex-front-app\noop.js
(@E:\project\ex-front-app\.postcssrc.js)
 @ ./src/assets/css/style.less 4:14-268 13:3-17:5 14:22-276
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8019 webpack/hot/dev-server babel-polyfill ./src/main.js

解决方法

• 错误提示字面意思是 module[3]是无效的plugin 这里指的是postcss-pxtorem
• 原因是安装的postcss-pxtorem版本过高，postcss-loader在加载postcss-pxtorem时返回值不匹配导致，因此降低版本即可

以下本人能够正常运行的版本信息

  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "postcss": "^8.2.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-pxtorem": "^5.1.1",
    "postcss-url": "^7.2.1",
  },