Autoprefixer介绍及在Vue中应用
1、介绍Autoprefixer是一款自动管理浏览器前缀的插件,可以解析css文件并且添加前缀到css内容里,使用Can I Use(caniuse网站)的数据决定哪些前缀是需要的。该插件css解析器采用postcss,使用Browserslist库,可以对浏览器的版本做精确设置。2、工具特点(1)、写纯净的css,不必学习特殊语言(如Sass),也不必记住其使用环境;(2)、与最新的规则...
1、介绍
Autoprefixer是一款自动管理浏览器前缀的插件,可以解析css文件并且添加前缀到css内容里,使用Can I Use(caniuse网站)的数据决定哪些前缀是需要的。该插件css解析器采用postcss,使用Browserslist库,可以对浏览器的版本做精确设置。
2、工具特点
(1)、写纯净的css,不必学习特殊语言(如Sass),也不必记住其使用环境;
(2)、与最新的规则同步;
3、在Vue中使用
(1)、安装postcss和autoprefixer
npm install postcss
npm install autoprefixer
(2)、在"项目名/build/webpack.base.conf.js "中加入
const autoprefixer=require("autoprefixer")
module:{
rules:[
{
test:/\.vue$/,
loader: 'vue-loader',
options:{
vueLoaderConfig,
postcss:[require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie> 8'] })]
}
},
(3)、在package.json里面找到 browserslist,加入以下内容,以兼容主流机型
"browserList":[
"> 1%",
"Last 2 versions",
"not ie <= 8",
"iOS >= 8",
"Firefox >= 20",
"Android > 4.4"
]
更多推荐
所有评论(0)