Vue CLI 3.x 配置postcss.config.js CSS处理和移动端适配方案！

今天跟大家聊了一下 vue 中的CSS 处理：postcss.config.js

首先我们要了解一下什么是 postcss

postcss：它是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能。

• 拥有极高的处理性能（3倍以上的处理速度）
• 你既可以写正常的CSS，也可以结合LESS或者SASS一起编写
• 对Source Map支持更好
• 他的插件真的太多太强大太便利了

postcss 的一些不错的插件

• autoprefixer是PostCSS最著名的一款插件，就不过多介绍了，相信同学们都使用过。
• postcss-cssnext (内置autoprefixer) 允许你使用未来的css语法，如css4（可以理解为css中的Babel）
• postcss-sprites 自动制作雪碧图，不用手动拼接啦，哈哈哈
• cssnano 压缩css代码(如果你是用webpack的话，css-loader集成了cssnano，你不需要再次引入)
• postcss-hash-classname 把转换后的css文件名附上哈希值
• pixrem 将rem转换为px
• postcss-px-to-viewport 将px转换为vh和vw（推荐作为移动端的计量单位，而不是rem）
• postcss-pxtorem 将px转换为rem

postcss 的用法

px转rem

module.exports = () => ({
  plugins: [
    require('autoprefixer')(),
    // require('postcss-px2rem')({ remUnit: 75 })
    require('postcss-pxtorem')({
      rootValue: 37.5,
      propList: ['*']
    })
  ]
});

这里用到了 postcss-pxtorem 将px转换为rem 的插件

px转vw

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      // viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    },
    'postcss-viewport-units': {
      // 排除会产生警告的部份
      filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1
    },
    cssnano: {
      preset: 'advanced',
      autoprefixer: false, // 和autoprefixer同样具有autoprefixer，保留一个
      'postcss-zindex': false
    }
  }
}

这里用到了 postcss-px-to-viewport，将px单位自动转换成viewport单位。postcss-px-to-viewport 文档

好了就先到这里了！最近项目太忙一个接一个，我会抽时间给大家分享一些干货的！

---

喜欢博主的可以点赞关注一下

喜欢博主的可以点赞关注一下

长得美的，长得帅的都关注了

现在就差你了

还不长按关注一下