在处理浏览器的兼容性问题时,我们需要加一些浏览器前缀,一般情况下,我们都是在css文件里手动添加的,如果使用PostCSS处理浏览器前缀,就可以自动添加浏览器前缀。
1)首先,我们要安装loader。
需要安装postcss-loader 和 autoprefixer
打开终端,进入到项目文件夹的路径,输入命令cnpm install postcss-loader autoprefixer --save-dev
2)在webapack.config.js里配置loader,代码如下:
module:{
rules:[
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader',{
loader:'postcss-loader',
options:{
plugins:[
require("autoprefixer")({
browsers:[
'ie >= 8',//ie版本大于等于ie8
'Firefox >= 20',//Firefox版本大于等于20版本
'Safari >= 5',//Safari版本大于等于5版本
'Android >= 4',//Android版本大于等于Android4
'Ios >= 6',//Ios版本大于等于Ios6
'last 4 version'//浏览器最新的4个版本
]
})
]
}
}]
}
]
}
3)在终端输入npm run dev
进行打包,完成后,如果有需要写浏览器兼容的属性,就会自动加上浏览器前缀啦。如下图所示:
或者,还可以在package.json里加入以下设置:
"browserslist":[
"ie >= 8",
"Firefox >= 20",
"Safari >= 5",
"Android >= 4",
"Ios >= 6",
"last 4 version"
]
和上面在webapack.config.js里配置loader达到的效果一样。