H5W3
当前位置:H5W3 > JavaScript > Vue相关 > 正文

vue安装postcss-pxtorem报错Error: PostCSS plugin postcss-pxtorem requires PostCSS 8

相信最近使用postcss-pxtorem + amfe-flexible移动端适配的同学会发现,安装完postcss-pxtorem并配置好vue.config.js后,会报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.,明明是按以往配置,怎么突然出错了…

实际上postcss-pxtorem已经步入6.0版本。
需要依赖于postcss8.0实现(具体项还没研究清楚~~TAT)

那么解决办法也很简单,查看package.jsonpostcss-pxtorem的版本是否在6.0以上。
如果是,通过$ npm install postcss -D把postcss安装了就行,其他一切如常。
因为自动安装最新,所以不用担心postcss不是8.0的。

或者你不想这么麻烦,可以选择使用postcss-pxtorem5.0的,通过命令$ npm install postcss-pxtorem@5.0.0 -D安装就行,这样就不用添加postcss依赖了。


其他配置如下:

  • main.js中引用amfe-flexible
    import "amfe-flexible";
  • 根文件目录创建vue.config.js文件,添加如下配置:
    module.exports = {
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
              require("postcss-pxtorem")({
                // 把px单位换算成rem单位
                rootValue: 37.5, // 换算的基数(设计图750的根字体为75)
                // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                propList: ["*"],
              }),
            ],
          },
        },
      },
    };

然后重新运行项目就可正常使用了。
不过只能转换css、sass、less等外部样式,以及vue文件中的style标签内的样式。
对于行内样式是没办法转换的。

本文地址:H5W3 » vue安装postcss-pxtorem报错Error: PostCSS plugin postcss-pxtorem requires PostCSS 8