在使用autoprefixer时,先前的配置能成功添加css浏览器前缀,但结合postcss-pxtorem插件后,px可以转换为rem,但css前缀无效。

经过几个小时的鼓捣,终于让我发现了蛛丝马迹。哈哈哈,好开心,好激动!!
一起来看一看博主遇到的问题。

1. autoprefixer的配置

根目录postcss.config.js文件中,配置代码如下:

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
        //'last 2 versions', // 所有主流浏览器最近2个版本
      ],
      grid: true
    }
  }
}

2. postcss-pxtorm的配置

根目录vue.config.js文件中,配置代码如下:

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 100, // 换算基数,默认100,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
            unitPrecision: 5, // 允许REM单位增长到的十进制数字,小数点后保留的位数。
            propList: ['*', '!font-size'], // 属性选择器,*表示通用,!font-size表示禁用字体转换
            exclude: /(node_module)/,  // 默认false,可以(reg)利用正则表达式排除某些文件夹的方法
            selectorBlackList: ['.radius'], //要忽略并保留为px的选择器
            // mediaQuery: false,  //(布尔值)允许在媒体查询中转换px。
            minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0
          })
        ]
      }
    }
  }
}

3. 分析

通过上两篇文章的总结,发现上述autoprefixerpostcss-pxtorm与文章中的配置完全一致。
为什么autoprefixer自动添加css前缀会无效呢??

反复修改、测试之后,揣摩出了其中的原因
3.1. 按照上述1. autoprefixer的配置2. postcss-pxtorm的配置,单独配置,各自都可以生效。但是一起使用后,autoprefixer无效。
3.2. 经测试发现,将代码都配置到postcss.config.js,各自都可以正常使用。
具体代码如下:

module.exports = {
  plugins: {
    "postcss-pxtorem": { // 把px单位换算成rem单位
      rootValue: 100, //换算基数, 默认100  ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
      unitPrecision: 5, //允许REM单位增长到的十进制数字,小数点后保留的位数。
      propList: ['*', '!font-size'],
      exclude: /(node_module)/,  //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
      selectorBlackList: ['.radius'], //要忽略并保留为px的选择器
      // mediaQuery: false,  //(布尔值)允许在媒体查询中转换px。
      minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0
    },
    'autoprefixer': {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
        //'last 2 versions', // 所有主流浏览器最近2个版本
      ],
      grid: true
    }
  }
}

4. 总结

4.1. 如果单独仅使用autoprefixerpostcss-pxtorem插件,可以按照以下两篇文章,进行配置
4.2. 如果这两个插件都要使用,可以将代码都配置到postcss.config.js

结合以下两篇文章做参考,效果会更佳。
autoprefixer总结:autoprefixer,自动补全css浏览器前缀
postcss-pxtorm总结:postcss-pxtorm,将像素单位生成rem单位

看都看到这了,留下三连吧   ——点赞、收藏、留言。
Logo

前往低代码交流专区

更多推荐