Vue PostCss插件pxtorem的使用

// 引入postcss-pxtorem
const pxtorem = require('postcss-pxtorem');
 
// 在Vue CLI中配置postcss-pxtorem
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          pxtorem({
            rootValue: 37.5, // 设计稿宽度的1/10，通常是750的1/10
            propList: ['*'], // 需要转换的属性，这里选择转换所有属性
            selectorBlackList: ['weui', 'mu'], // 不进行转换的选择器
            replace: true, // 是否直接更换属性值，而不添加具有rem单位的新属性
            mediaQuery: false, // 是否在媒体查询中也进行转换
            minPixelValue: 0 // 设置最小的转换数值，如果为1的话，1px也会被转换
          })
        ]
      }
    }
  }
};

这段代码演示了如何在Vue CLI项目中配置postcss-pxtorem插件，以自动将CSS中的px单位转换为rem单位。在这个例子中，我们设置了根元素的字体大小为设计稿宽度的1/10（例如750px设计稿对应的是75px），并指定了哪些属性需要转换以及哪些选择器不进行转换。