.postcssrc.js插件的简单使用

用途

主要是为了进行移动端适配

    PostCss是一个处理 CSS 的处理工具，Vue CLI 内部使用了 PostCSS。本身功能比较单一，它主要负责解析 CSS 代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如本次我们的rem适配使用的插件：

 

安装

npm安装

 npm install postcss-px-to-viewport --save-dev

yarn安装

 yarn add -D postcss-px-to-viewport

在vue文件中使用

与src文件同级创建 .postcssrc.js 文件并进行配置，不需要引入直接生效

 配置

const path = require('path');

module.exports = ({
  file
}) => {
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px", // 需要转换的单位
        viewportWidth: file && file.dirname && file.dirname.includes('vant') ? 375 : 750, // 视窗的宽度
        unitPrecision: 6, // 单位转换后保留的小数位
        propList: ["*"], // 指定可以转换的css属性
        viewportUnit: "vw", // 指定需要转换成的视窗单位
        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位
        selectorBlackList: ['.select_homeView', '.tableDiv', '.table_homeView','el-'], // 指定不转换为视窗单位的类
        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位
        mediaQuery: true, // 是否在媒体查询时也转换px
        exclude: [], // 设置忽略文件
        landscape: false,
        // includes: /homeView/
      }
    }
  }
}

详细的配置在代码里面有注释 复制上面代码可以进行使用