Vue项目配置postcss-pxtorem

Vue2项目

安装指定版本

最新版本@6 会报错：PostCSS plugin postcss-pxtorem requires PostCSS 8

npm i [email protected] -D

配置 vue.config.js

module.exports = {
  publicPath: "./",
  productionSourceMap: false, // 生产打包时不输出map文件，加快打包速度
  devServer: {
    disableHostCheck: true,
    // https: true,
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            // 把px单位换算成rem单位
            rootValue: 37.5, //换算基数，
            unitPrecision: 3, //允许REM单位增长到的十进制数字,小数点后保留的位数。
            propList: ["*"],
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            selectorBlackList: [".van"], //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px
            minPixelValue: 1, //设置要替换的最小像素值
          }),
        ],
      },
    },
  },
};