vue-cli3.0配置autoprefixer+postcss-plugin-px2rem（从创建开始）_综合

前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。这里配置autoprefixer css后处理器自动兼容
看下效果

在这里插入图片描述

先单独配置autoprefixer CSS，less,sass都有用

1.vue create XXX 项目
这个就不多说了

2.安装相关依赖

npm install -D css-loader style-loader
npm install -D postcss-loader autoprefixer postcss(这个我装的时候失败了，之后用的cnpm)

安装成功如下：
在这里插入图片描述
3.根目录下创建postcss.config.js

module.exports = {plugins: [require('autoprefixer')]
}

4.package.json中最后加入
下面的是控制浏览器，移动段版本

devDependencies{.....
}
"browserslist": ["defaults","not ie < 11","last 2 versions","> 1%","iOS 7","last 3 iOS versions"]

5.如果有.browserslistrc 删除，会冲突

6.效果
在这里插入图片描述

二.移动段rem插件使用 postcss-plugin-px2rem

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},'postcss-plugin-px2rem': {// rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。// unitPrecision: 5, //允许REM单位增长到的十进制数字。//propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。// propBlackList: [], //黑名单exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值// selectorBlackList: [], //要忽略并保留为px的选择器// ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0}}}

注意：原来引入css插件可以在vue.config.js中
在这里插入图片描述
但是.这里会跟postcss.config.js冲突，将autoprefixer写在vue.config.js中，会报错。所以将引入的插件全部写入postcss.config.js

报错：

autoprefixer版本过高可以降版本处理 npm i postcss-loader autoprefixer@8.0.0

Module build failed (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:。。。。。